最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对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>

CSS3学习之圆角box-shadow,阴影border-radius的更多相关文章

  1. CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  2. css3神奇的圆角边框、阴影框及其图片边框

    css3圆角,建议IE10以上 如果border-radius 单位是百分比,则参考为自身宽高,因此当宽高不一致时,圆角为不规则形状 如果border-radius 为50%,则为椭圆:当宽高一致时, ...

  3. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  4. PIE使IE浏览器支持CSS3属性（圆角、阴影、渐变）

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  5. HTML5与CSS3权威指南之CSS3学习记录

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

  6. CSS3学习基本记录

    CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow: ...

  7. CSS3 学习小结

    写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...

  8. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  9. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

随机推荐

  1. 程序设计C 实验三 题目九 方程式(0300)

    Description: Consider equations having the following form: a*x1*x1 + b*x2*x2 + c*x3*x3 + d*x4*x4 = 0 ...

  2. 性能测试 - some

    1.日常业务中测试过的最大并发数,其QPS为多少? 答: 从服务端开发处得知线上某台机器单接口访问量为63万 因该接口为视频类访问接口,大多数接口集中于晚间时段.可计算QPS = 63万/8/3600 ...

  3. XJOI网上同步训练DAY5 T3

    就是对于一个数,我们去考虑把t*****减到(t-1)9999*的代价. #include<cstdio> #include<cmath> #include<algori ...

  4. ResourceString的用法

    在Delphi编程的那段“古老”的日子里(就是在版本4之前),在程序中使用字符串有两个基本的方法.你可以使用字符串将它们嵌入到源程序中,例如: MessageDlg( 'Leave your stin ...

  5. Linux企业级项目实践之网络爬虫（20）——扩展成为规则插件模式

    为了方便我们爬虫功能的扩展,最好使用插件机制.使用插件技术能够在分析.设计.开发.项目计划.协作生产和产品扩展等很多方面带来好处:(1)结构清晰.易于理解.由于借鉴了硬件总线的结构,而且各个插件之间是 ...

  6. java开发经验分享（一）

    一. 编码 1. 约束自己,规范编码习惯 充足的代码注释.标准缩进的格式.注意命名规范.参考<开发管理规范> "看上去"专业能促进代码质量.越是难看的代码,在它的演化过 ...

  7. ACM2036_改革春风吹满地（多边形面积计算公式）

    用到的知识点: 代码如下: /* Input 输入数据包含多个测试实例,每个测试实例占一行,每行的开始是一个整数n(3<=n<=100),它表示多边形的边数(当然也是顶点数),然后是按照逆 ...

  8. c语言结构体5之匿名结构体

    注意: 1匿名结构体不会出现重合 重命名的情况 2有名结构体 名称不能相同 也就是不能重名 //匿名结构体不会出现重名的情况 struct //无名结构体 { ]; ]; int num; };//不 ...

  9. Web Service-- 使用 JDK 发布 WS

    Web Service,即“Web 服务”,简写为 WS,从字面上理解,它其实就是“基于 Web 的服务”.而服务却是双方的,有服务需求方,就有服务提供方.服务提供方对外发布服务,服务需求方调用服务提 ...

  10. XAMPP安装及配置注意事项

    1.下载对应版本以后,解压安装 2.设置环境变量中的path,即D:\xampp\mysql\bin 3.设置监听端口 4.解决端口冲突问题 5.各种测试网址注意事项 由于很晚了,先记录下来,明天补充 ...