购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 边框

CSS3 边框
通过CSS3的边框属性,可以创建圆角边框、给边框添加阴影,还可以使用用图片来绘制边框。
编辑:前端控 前端控 更新时间:2019-03-23 11:14:45

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 */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 8.jpg


边框属性

属性说明CSS版本
border-image设置所有边框图像的速记属性。3
border-radius一个用于设置所有四个边框- *-半径属性的速记属性3
box-shadow附加一个或多个下拉框的阴影3


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号