CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似(padding-top:2px\0)欠考虑!
看了腾讯的,下午就学了一下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刷新本页,BY\设计师零张</center>
最新文章
- 记一次Suse下的Django环境配置——第一弹
- [转载] 关于PreparedStatement.addBatch()方法
- JAVA 遍历文件夹下的所有文件
- (转)常用CSS优化总结——网络性能与语法性能建议
- JSP基本语法
- 细讲encodeURI和encodeURIComponent以及escape的区别与应用
- C# 离线人脸识别Demo 使用ArcFace 2.0开发完成
- 【原创】大叔问题定位分享(27)spark中rdd.cache
- Appium测试安卓apk遇到的问题及解决方法
- HDFS(一) 高级特性
- Windows 上安装 Azure PowerShell及Azure PowerShell部署虚拟机
- Java8内置的函数式编程接口应用场景和方式
- asp.net mvc Areas 母版页动态获取数据进行渲染
- Python 3.6.5 导入pymysql模块出错:No module named &#39;pymysql&#39;
- Codeforces Round #369 (Div. 2)-C Coloring Trees
- Android webView打不开baidu网页的解决办法
- golang模拟动态高优先权优先调度算法
- 迷你MVVM框架 avalonjs 学习教程16、过滤器
- STL容器基本功能与分类
- .NETFramework、C#、VisualStudio 这三者之间关系,你了解吗!
热门文章
- 让IE支持CSS3圆角的方法
- C语言初学 简单定义圆的面积计算问题
- mark 的总结开发笔记-备
- Lintcode--008(编辑距离)
- Ubuntu12.04下载Android4.0.1源码全过程,附若干问题解决[转]
- CRACKING THE CODING INTERVIEW 笔记(1)
- C#读取文件高效方法实现
- 子查询有OR无法展开,改写成union
- POJ2828---线段树与逆序数&;&;DUTOJ1210---逆序对构造排列
- Codeforce 216 div2