请选择 进入手机版 | 继续访问电脑版

好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

[HTML5] 好程序员web前端培训分享CSS3 边框

[复制链接]
叶子老师 发表于 2019-5-15 16:00:27 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
本帖最后由 叶子老师 于 2019-5-15 16:02 编辑

好程序员web前端培训分享CSS3 边框,通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。
在本章中,您将学到以下边框属性:
border-radius
box-shadow
border-image

浏览器支持
图片1.png
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 属性用于创建圆角:
图片2.png
实例
div 元素添加圆角:
1. div
2. {
3. border:2px solid;
4. border-radius:25px;
5. -moz-border-radius:25px; /* Old Firefox */
6. }


CSS3 边框阴影
CSS3 中,box-shadow 用于向方框添加阴影:
图片3.png
实例
div 元素添加方框阴影:
1. div
2. {
3. box-shadow: 10px 10px 5px #888888;
4. }

CSS3 边框图片
通过 CSS3 的 border-image 属性,您可以使用图片来创建边框:
图片4.png
用于创建上面的边框的原始图片:
图片5.png
实例
使用图片创建围绕 div 元素的边框:
1. <font color="#000000" size="3">div
2. {
3. border-image:url(border.png) 30 30 round;
4. -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
5. -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
6. -o-border-image:url(border.png) 30 30 round; /* Opera */
7. }</font>

新的边框属性
属性
描述
    CSS
border-image
设置所有 border-image-* 属性的简写属性
    3
border-radius
设置所有四个 border-*-radius 属性的简写属性
    3
box-shadow
向方框添加一个或多个阴影
    3


好程序员web前端培训官网:http://www.goodprogrammer.org/html5_class.shtml
精彩内容,一键分享给更多人!
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
好程序员
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启