css3里面增加了几种很好玩的边框属性，这篇文章来为大家介绍一下。
用 CSS3，可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。
css3新增了三种属性：
border-radius:
box-shadow:
border-image:一、CSS3 圆角
这里就不多做描述了，详细圆角可以看我 css3 圆角（border-radius）详解 这篇文章
<style type="text/css">
div{
width: 150px;
height: 50px;
background: #CCCCCC;
border: 1px solid #000000;
border-radius: 5px;
}
</style>
<body>
<div>border-radius圆角属性</div>
</body>
二、CSS3 盒阴影 box-shadow
使用box-shadow可以为元素本身添加阴影，即向边框添加一个或多个阴影。（不可继承）
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
外层阴影：默认外层阴影
<style type="text/css">
div{
width: 150px;
height: 50px;
background: #55ffff;
box-shadow: 10px 10px 10px #795DA3;
}
</style>
<body>
<div>box-shadow盒子阴影属性</div>
</body>
内层阴影：
<style type="text/css">
div{
width: 150px;
height: 50px;
background: #55ffff;
box-shadow: 5px 5px 5px inset #795DA3;
}
</style>
<body>
<div>box-shadow盒子阴影属性</div>
</body>
三、CSS3 边框图片
有了 CSS3 的 border-image 属性，就可以使用图像创建一个边框。
border-image 属性允许指定一个图片作为边框！ 用于创建上文边框的原始图像。
这个必须要有border属性
<style type="text/css">
div{
width: 150px;
height: 50px;
border: 10px solid;
border-image: url(img1/i1.jpg) 30 round;
}
</style>
<body>
<div>box-shadow盒子阴影属性</div>
</body>
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
