CSS3进修之圆角box-shadow,阴影border-radius

发布时间：2018-10-13 02:28:43 所属栏目：创业来源：站长网

导读：最近常常玩腾讯微博 ,出来职业风俗,看看它的CSS,内里运用了大量的css3的东东,有一处用到了Data URI,尚有css expression有争议的处所,对png24图片的处理赏罚也是用滤镜,相同(padding-top:2px)欠思量! 看了腾讯的,下战书就学了一下css3的东东!规划往后的项目中

最近常常玩腾讯微博,出来职业风俗,看看它的CSS,内里运用了大量的css3的东东,有一处用到了Data URI,尚有css expression有争议的处所,对png24图片的处理赏罚也是用滤镜,相同(padding-top:2px)欠思量!

看了腾讯的,下战书就学了一下css3的东东!规划往后的项目中也逐渐引入css3,由于他很酷,固然ie不支持!

1.阴影box-shadow
取值：<length> <length> <length>? <length>? || <color>：阴影程度偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影恍惚值；阴影颜色
引擎范例 Box-shadow
Gecko -moz-box-shadow
Webkit -webkit-border-shadow
支持环境:ie不支持,那么ie的处理赏罚,用Shadow滤镜:filter:progid:DXImageTransform.Microsoft.Shadow(color='#919191',Direction=135,Strength=3);

2.圆角border-radius
圆角,很优雅,界面也很惬意,但ie铁定了心的不支持!渐时加强吧.
代码:border:1px solid #d0d0d0;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3进修之圆角box-shadow,阴影border-radius</title> <style type="text/css"> body{font-size:12px;} .wrap{margin:0 auto;width:950px;} /* reset */ p,div{margin:0;padding:0;} p{border-bottom:1px dashed #dfdfdf;padding:10px 0 5px;margin-bottom:5px;} /* 阴影 box-shadow*/ .shadow{width:90px;padding:2px;background:#efefef;border:1px solid #cfcfcf; -moz-box-shadow:1px 1px 3px #919191; -webkit-box-shadow:1px 1px 3px #919191; filter:progid:DXImageTransform.Microsoft.Shadow(color='#919191',Direction=135,Strength=3); /* ie用Shadow滤镜 */ } .shadow-main{padding:5px;color:#999;background:#fff} /* 圆角border-radius */ .radius{width:300px;height:50px;padding:3px 5px;font-size:12px;overflow-y:auto; border:1px solid #d0d0d0; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; } </style> </head> <body> <div class="wrap"> <h1>CSS3进修</h1> <p>阴影 box-shadow</p> <div class="shadow"><div class="shadow-main">口令:putaoshu</div></div> <p>圆角border-radius</p> <textarea class="radius"></textarea> </div> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如