最近经常玩腾讯微博,出来职业习惯,看看它的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. CSS太阳月亮地球三角恋旋转效果

    纯粹玩一下,好像没有什么实际的卵用,but,纯玩买不了上当,纯玩买不了受骗........ 地月旋转的一个css效果,无聊玩玩,可以复制到记事本试试 <!DOCTYPE html>< ...

  2. android ioctl fuzz,android 本地提权漏洞 android root

    目前正在研究android 三方设备驱动 fuzzer , 也就是下图所说的 ioctl fuzzing, 下图是由keen team nforest 大神发布: 欢迎正在研究此方面的人联系我共同交流 ...

  3. 关于KMP算法理解（快速字符串匹配）

    参考:http://www.ruanyifeng.com/blog/2013/05/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm.html 2016-08- ...

  4. LeetCode_Scramble String

    Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...

  5. [置顶] API相关工作过往的总结之Sandcastle简要使用介绍

    Sandcastle介绍 在微软推出Sandcastle之前,人们倾向于选择开源的NDoc(.NET代码文档生成器).NDo可以将 C#.NET 编译生成的程序集和对应的 /doc XML文档,自动转 ...

  6. c语言二维数组变色龙之死字的打印

    1 #include <stdio.h> #include <stdlib.h> void main() { ][]= { {'#','#','#',' ','#','#',' ...

  7. <php>Ajax基本格式

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. poj 2441 Arrange the Bulls（状态压缩dp）

    Description Farmer Johnson's Bulls love playing basketball very much. But none of them would like to ...

  9. 20 个非常棒的jQuery内容滑动插件

    Wow Slider  WOW Slider是一款小巧易用的网页滑块设计.该软件内置大量的模版和工具,让你轻松设计出完美的视觉效果.他还可以帮助用户在短时间内创造出梦幻般的滑块,而无需编码和图像编辑, ...

  10. 在CentOS 7上利用systemctl加入自己定义系统服务

    CentOS 7继承了RHEL 7的新的特性,比如强大的systemctl,而systemctl的使用也使得以往系统服务的/etc/init.d的启动脚本的方式就此改变,也大幅提高了系统服务的执行效率 ...