CSS3学习——边框

通过 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。