通过 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。
高否?富否?帅否? 否? 滚去学习!
















