CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局.
CSS3是最新的CSS标准.
关于transform:
transform:rotate(10deg);//顺时针方向旋转10°
浏览器支持情况:低版本的IE浏览器不支持.
CSS3简介
对于CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2.
CSS3模块
CSS3倍拆分为"模块".旧规范已拆分成小块,还增加了新的.
一些最重要CSS3模块如下:
选择器, 盒模型, 背景和边框, 文字特效, 2D/3D转换, 动画, 多列布局, 用户界面.
CSS3建议
W3C的CSS3规范仍在开发.
但是,许多新的CSS3属性已在现代浏览器使用.
CSS3边框
使用CSS3, 你可以创建圆角边框, 添加阴影框, 并作为便捷的形象而不是用PS设计.
border-radius box-shadow border-image
CSS3圆角
border-radius:5px;
javascript语法: object.style.borderRadius = "5px"
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值: 四个圆角值相同
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值: 四个圆角值相同
也可以创造椭圆的边角:border-radius: 50px/15px;
| border-radius | 所有四个边角 border-*-*-radius 属性的缩写 |
| border-top-left-radius | 定义了左上角的弧度 |
| border-top-right-radius | 定义了右上角的弧度 |
| border-bottom-right-radius | 定义了右下角的弧度 |
| border-bottom-left-radius | 定义了左下角的弧度 |
CSS3阴影
box-shadow: 10px 10px 5px #888888;
CSS3边界图片
border-image:url(border.png) 30 30 round;
border-image属性是一个简写属性,用于设置以下属性:
border-image-source:用在边框的图片的路径.
border-image-slice:图片边框向内偏移.
border-image-width:图片边框的宽度.
border-image-repeat:图像边框是否平铺repeat, 铺满round, 拉伸stretch.
.image{border:15px solid transparent;border-image:url(border.png) 30 30 round;}
IE9和IE10不支持.CSS3 background-image:属性
CSS3中可以通过background-image属性添加背景图片.
不同的背景图片用逗号隔开,所有的图像中显示在最顶端的为第一张.
.bgimage{
background-image:url(hua.png),url(bg.png);
background-position:center center,left top;
background-repeat:no-repeat,no-repeat;
}
CSS3 background-size属性
background-size指定背景图像的大小. CSS3以前,背景图像大小由图像实际大小决定.
CSS3中可以指定背景图片,让我们重新再不同的环境中指定背景图片的大小.您可以指定像素或百分比大小.
你指定的大小是相对于父级元素的宽度和高度的比分比大小.
.bgimgsize{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
CSS3的background-origin属性
background-origin属性指定了背景图像的位置区域.
content-box, padding-box, border-box区域内可以放置背景图像.
padding-box:背景图像相对于内边距框来定位.
border-box:背景图像相对于边框盒来定位.
content-box:背景图像相对于内容框来定位.
注意:background-origin属性规定background-position属性对于什么位置来定位.
如果背景图像的background-opsition属性是fixed,则该属性没有效果.
CSS3的background-clip属性
CSS3中background-clip背景裁剪属性是从指定位置开始绘制.
