CSS3学习——边框
浏览数：25 /
时间：2015年06月09日
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。
CSS3 圆角边框
在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。
在 CSS3 中，创建圆角是非常容易的。
在 CSS3 中，border-radius 属性用于创建圆角：
这个矩形有圆角哦！
实例
向 div 元素添加圆角：
<div>border-radius 属性允许您向元素添加圆角。</div>
div{ width: 350px; text-align: center; padding: 10px 0; background-color: #eeeeee; border: 3px solid #999999; border-radius: 20px; -moz-border-radius:25px; /* 老的 Firefox */ }
取值：
- <length>：用长度值设置对象的圆角半径长度。不允许负值
- <percentage>：用百分比设置对象的圆角半径长度。不允许负值
说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
- 垂直半径也遵循以上4点。
- 对应的脚本特性为borderRadius。
需要注意的是从Firefox13开始移除了对-moz-border-radius的支持，仅支持border-radius，在4.0-12.0区间，两种方式都支持。
CSS3 边框阴影
在 CSS3 中，box-shadow 用于向方框添加阴影：
<div>border-radius 属性允许您向元素添加阴影。</div>
div{ width: 300px; height: 100px; background-color: orange; box-shadow: 10px 10px 10px 1px #999999; }
取值：
- none：无阴影
- <length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- <length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- <length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
- <color>：设置对象的阴影的颜色。
- inset：设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
CSS3 边框图片
通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：
http://www.w3school.com.cn/tiy/t.asp?f=css3_border-image
取值：
- [ border-image-source ]：设置或检索对象的边框是否用图像定义样式或图像来源路径。
- [ border-image-slice ]：设置或检索对象的边框背景图的分割方式。
- [ border-image-width ]：设置或检索对象的边框厚度。
- [ border-image-outset ]：设置或检索对象的边框背景图的扩展。
- [ border-image-repeat ]：设置或检索对象的边框图像的平铺方式。
说明：
复合属性。设置或检索对象的边框样式使用图像来填充。
- 使用图像替代border-style去定义边框样式。当border-image为none或图像不可见时，将会显示border-style所定义的边框样式效果。
- 对应的脚本特性为borderImage。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
