欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
CSS3 的边框属性可以给创建圆角的盒子,也可以给盒子设置阴影,用图片美化盒子。
border-radius可以给元素设置圆角。
如下,一个div元素:
<div class="box">border-radius可以给元素设置圆角。</div>
我们给它加一点样式,并设置它的border-radius为15px:
.box{
width: 284px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
font-size: 14px;
background: #999;
border:2px solid #333;
border-radius: 15px;
浏览器中查看效果:
CSS3 新特性——border 边框属性
CSS3 新特性——border 边框属性
border-radius也可以给它四个角分别设置角度,四个值依次代表左上,右上,右下,左下:
border-radius: 15px 15px 0px 0px;
CSS3 新特性——border 边框属性
CSS3 新特性——border 边框属性
box-shadow可以为元素设置边框阴影。box-shadow设置的属性如下:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置,可以是负值。
v-shadow 垂直阴影的位置,可以是负值。
blur 模糊距离。
spread 阴影的尺寸。
color 阴影的颜色。
inset 将外部阴影 (outset) 改为内部阴影。
以上 h-shadow ,v-shadow是必须要设置的,其他的可以根据需要去设置。
我们给上面的div元素添加阴影:
css样式:
.box{
width: 284px;
height: 100px;
background: #f60;
box-shadow: 10px 10px 5px #ccc;
浏览器中查看效果:
CSS3 新特性——border 边框属性
CSS3 新特性——border 边框属性
border-image 使用图片设置边框。
如下:
<div class="box"></div>
我们先给div元素的边框颜色设置为透明(transparent),然后在使用图片设置边框:
.box{
width: 284px;
height: 100px;
border:15px solid transparent;
width:300px;
padding:10px 20px;
-webkit-border-image:url(images/border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/border.png) 30 30 round; /* Opera */
border-image:url(images/border.png) 30 30 round;
看一下效果:
CSS3 新特性——border 边框属性
CSS3 新特性——border 边框属性
童靴们可能不懂为啥属性的前边会有-webkit-、-o-这样的前缀呢?这是因为好多浏览器都不支持CSS的新特性,所以写这些专属的前缀是为了兼容各浏览器。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c58251.shtml