起航学习网

这篇文章讲述的是Web前端开发培训中CSS 3边框模块的教程。IT培训网班正在火热招生中，同学你要不要加入我们呐?在这里小T每天也会分享一下干货给大家。那么今天说道的就是Web前端开发培训课程中的章节。

CSS3 边框

CSS3 简介

CSS3 背景

CSS3 边框

通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 - 并且不需使用设计软件，比如 PhotoShop。

在本章中，您将学到以下边框属性：

border-radius

box-shadow

border-image

浏览器支持

属性浏览器支持

border-radius

box-shadow

border-image

Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。

Firefox、Chrome 以及 Safari 支持所有新的边框属性。

注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -Webkit-。

Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-。

CSS3 圆角边框

在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。

在 CSS3 中，创建圆角是非常容易的。

在 CSS3 中，border-radius 属性用于创建圆角：

这个矩形有圆角哦!

实例

向 div 元素添加圆角：

div

{

border:2px solid;

border-radius:25px;

-moz-border-radius:25px; /* Old Firefox */

}

亲自试一试

CSS3 边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

实例

向 div 元素添加方框阴影：

div

{

box-shadow: 10px 10px 5px #888888;

}

亲自试一试

CSS3 边框图片

通过 CSS3 的 border-image 属性，您可以使用图片来创建边框：

border-image 属性允许您规定用于边框的图片!

用于创建上面的边框的原始图片：

实例

使用图片创建围绕 div 元素的边框：

div

{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

-Webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

更多Web培训类相关知识敬请关注Web前端开发培训官网qh.itpxw.cn

免责声明：内容和图片源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容

Web教程网是一个专注于技术资讯的综合性门户网站。是Web爱好者学习交流的网站,这里提供大量实用的技术文档及相关资源下载，是网页设计、网络编程人员及其爱好者必备网站。

文章出自：http://qh.itpxw.cn/peixun/web/202185788.html

文章标题：Web前端开发培训中CSS 3边框模块的教程



免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉

(责任编辑：深圳学历教育网)