- HTML中文网
- 联系QQ：18840023
- QQ交流群
- 微信公众号
前端控
更新时间：2019-04-03 17:57:27
CSS3 边框
通过 CSS3，可以创建圆角边框，向矩形添加阴影，使用图片来绘制边框等，并且不需使用设计软件比如 PhotoShop
在本章中，您将要学习以下边框属性：
border-radius
box-shadow
border-image
浏览器支持：
| 属性 | 浏览器支持 | ||||
| border-radius | |  |  |  |  |
| box-shadow | | | | | |
| border-image |
IE不支持 | | | Safari 5以下需要 加前缀 -webkit- | 需加前缀-o- |
CSS3 圆角（border-radius）
在 CSS2 中添加圆角棘手，我们不得不在每个角落使用不同的图像
但在CSS3 中，可以通过 border-radius 属性很容易创建圆角
div
{
width:200px;
height:200px;
border-radius:50%;
background-color:pink;
}点击 "运行实例" 按钮查看在线实例
效果图：
CSS3 盒阴影（box-shadow）
CSS3 中的 box-shadow 属性被用来添加阴影
div
{
width:200px;
height:100px;
box-shadow:10px 10px 5px #ccc;
background-color:pink;
}点击 "运行实例" 按钮查看在线实例
效果图：
CSS3 边框图片（border-image）
通过 CSS3 的 border-image 属性，可以使用图片来创建边框
div
{
width:200px;
height:100px;
text-align: center;
line-height: 100px;
border-image:url("images/kuang.jpg") 30 30 round;
-moz-border-image:url("images/kuang.jpg") 30 30 round; /* 旧版本Firefox */
-webkit-border-image:url("images/kuang.jpg") 30 30 round; /* Safari 和 Chrome */
-o-border-image:url("images/kuang.jpg") 30 30 round; /* Opera */
}点击 "运行实例" 按钮查看在线实例
效果图：
边框属性
| 属性 | 说明 | CSS版本 |
|---|---|---|
| border-image | 设置所有边框图像的速记属性。 | 3 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
| box-shadow | 附加一个或多个下拉框的阴影 | 3 |
推荐手册