您当前位置：首页 > web前端 > htmlcss > CSS3学习之圆角box-shadow,阴影border-radius

CSS3学习之圆角box-shadow,阴影border-radius

来源：程序员人生发布时间：2014-04-26 05:28:12 阅读次数：2477次

最近经常玩腾讯微博,出来职业习惯,看看它的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.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 创新B2B行业网站广告模式增加客户效果

下一篇 自定义显示器横竖屏切换顺序技巧

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点