来源：http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html

作者：浪迹天涯

1.边框圆角（Border Radiuas）

这个是我们在平常很常用的吧，以前我在用div圆角的时候，特别特别的痛苦，不管是用CSS来画圆角，还是用图片来画圆角都不那么容易，但是现在好了，在CSS3中，直接只需要如下面饿代码，就能做出美轮美奂的圆角效果了~~~

#box1 {border: 1px solid #699;/* for Mozilla Firefox */
-moz-border-radius: 20px;/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
}

实例效果图：

2.盒阴影（Box Shadow）

就是让一个div能够产生阴影效果。代码如下：

#box1{border: 1px solid #699;-moz-box-shadow: 5px -5px 5px #b6ebf7;-webkit-box-shadow: 5px -5px 5px #b6ebf7;width: 100px;height: 100px;margin-left: 100px;margin-top: 100px;background-color:Gray;border-color:Yellow;}

需要注意的是，它有4个参数：

第一个参数：水平偏移的位置，它有正数或者负数。如果是正数的话，那么表示边框的右（right）边产生阴影；否则如果是负数的话，那么它的左边（left）框产生阴影效果。

第二个参数：垂直偏移的位置。它也有正数或者负数。如果是正数的话，那么表示下（bottom）边框有阴影；否则如果是负数的话，那么它的上（top）边框有阴影。

第三个参数：阴影的大小

第四个参数：颜色，这个很好理解。

实例效果图：

注意上面，第二个参数，我用的是负数。

有box shadow ，还有一个属性是text-shadow，这个主要是运用在文字上面的。

代码如下：

<div style="background-color: #535353; color: #353535; font-family: 微软雅黑; font-size: 64px; padding:20px; font-weight:bold;"><span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br><span style="text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br><span style="text-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;">Welcome to my home!</span><br><span style="color: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;">Welcome to my home!</span></div>

实例效果图：

3.透明度（Transparency or RGBA）

设定元素的透明度一直以来都是比较棘手的问题，不同的浏览器之间有不同的使用方法。

比如我以前需要如下进行设置透明度：【注意：此方法不建议用】

Firefox, Safari, Chrome和Opera下的CSS透明度

#myElement {  opacity: .7;
}

IE下的CSS透明度

#myElement {  filter: alpha(opacity=40);
}

IE8的CSS透明度的方法语法如

#myElement {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
/*第二行仅在IE8下有效 */
}

Firefox和Safari旧版本所需的透明度设置：

#myElement {  -khtml-opacity: .5;  -moz-opacity: 0.5;
}

是不是特别特别的坑爹啊！~~。

还好，我们现在生活在一个开始完美的时代，CSS 3出来之后，有了新的一个名词就是透明度（transparency）的属性。

代码如下：

#box3 {background-color: rgba(110, 142, 185, .5);
}

里面有4个参数，前3个参数特别好理解，就是rgb颜色的（别告诉我，还不知道什么叫rgb颜色值，不知道的拉出去打屁屁），最最重要的就是第四个值了。它的值在0到1之间，值越大表明越不透明。

不过，也别高兴的太早，在这里还是有一个特别的例子，可能大家也想到就是微软的IE。微软老喜欢整个和别人不一样的东西，累死的是我们程序员。

IE理解上面的语句，直接的理解为背景颜色，而不会理解为 rgba。为了我们在开发的时候确保在所有的浏览器中实现完美兼容，我们需要如下进行修正：

#box3 {
/* For all browsers */
background-color: #6e8eb9;
}body:last-child #box3 {
/* Exclude all IE browsers using :last-child */
background-color: rgba(110, 142, 185, .5)!important;
}

:last-child 是伪选择器，在CSS2开始在css中使用选择器。IE 对这个是不认识，所以它不会执行它后面的代码。

所以，上面就实现了完美兼容。

实例效果图：

4.列数（Columns）布局

就是说可以把框框内部的内容分成几个列。（嗯，就是word里面的分栏的效果）

先上代码：

#box1{border: 1px solid #699; /* for Mozilla Firefox */-moz-column-count: 2;-moz-column-gap: 20px;-moz-column-rule: 1px solid #6e8eb9; /* for Safari & Google Chrome */-webkit-column-count: 2;-webkit-column-gap: 20px;-webkit-column-rule: 1px solid #6e8eb9;margin-left: 100px;margin-top: 100px;border-color: Yellow;background-color:Gray;}

-moz-column-count:表示列的数目，比如2，那么表示2分成2列。

-moz-column-rule:表示中间分割线的样式。

实例效果图：

上面第一个我分层2列，而第二个我是分成3列的。

还有就是第一个的 -webkit-column-rule: 3px solid #6e8eb9;我这样设置，所以它的分割线就是加粗的。

5.显示多个背景图片

你可以在一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：

background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);

代码如下：

border: 1px solid #699;
background: url(/Nature/bird1-thumb.png) no-repeat 0 0, url(/Nature/apple.jpg) no-repeat 100% 0;
border: 1px solid #699;
padding: 0 20px;
margin-left: 100px;
margin-top: 100px;
border-color: Yellow;
background-color: Gray;
width:400px;
height:300px;

实例效果图：

但是，这里还是别高兴的太早，又是微软那孩子没事干，又在这里搞一个不兼容性，所以你不得下下面代码，为了兼容所以浏览器：

#box5 blockquote {
/* 用在所有的浏览器*/
background: url(/i/quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}body:last-child #box5 blockquote{
/* 用在除了IE 之外的浏览器:last-child */
background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}

6.轮廓（outlines）

也就是在框在的内部再画一个框。

代码如下：

#box1{border: 1px solid #000;outline: 1px solid #699;outline-offset: -20px;border: 1px solid #699;padding: 0 20px;margin-left: 100px;margin-top: 100px;border-color: Yellow;background-color: Gray;width: 400px;height: 300px;}

参数很好理解： outline: 1px solid #699; 这个画框；

outline-offset 这个表示里面的偏移量，通俗点说就是距离。

实例效果图：

7.背景渐变（Background Gradients）

顾名思义，渐变就是颜色慢慢的开始变淡。在CSS3中，渐变效果非常非常的灵活，而且运用也很方便。

不过，这里需要注意的一点是在Firfox和chrome浏览器之间的设定没有和上面的那么简单。

Firfox 的代码：

background: -moz-linear-gradient(bottom,#b6ebf7, #fff 50%);

Chrome or safari的代码：

background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));

参数解释下，比如在firfox中，

第一个参数：bottom 表示运用的位置，bottom表示在底部，当然你也可以有其他地方，比如left表示在方框的左边，right在方便的右边，top就是在顶部啦！~。

而在chrome中，color-stop：用来表示开始和结束的值以及里面的颜色。其余参数和上面一样。

实例效果图：

8.旋转（Rotate）

旋转，顾名思义就是转动元素的角度，很好理解。

代码：

#box1{border: 1px solid #000;-moz-transform: rotate(20deg);-webkit-transform: rotate(20deg);border: 1px solid #699;padding: 0 20px;margin-left: 100px;margin-top: 100px;border-color: Yellow;background-color: Gray;width: 400px;height: 300px;}

rotate（角度）里面的数组就是角度的意思，deg是英文单词degree的缩写度数的意思。

实例效果图：

注意：

如果是负数的话，那么它会向相反方向转动。

如果是超过360度的话，那么会和360进行求余运算，比如你写 rotate(380deg)，那么它的值等效于rotate（20deg）。

9.反射（reflect）

反射，其实也就是倒影效果。

代码如下：

#myFont{-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent),to(rgba(255, 255, 255, 0.51)));font-size: 30px;}

实例效果图：

10.转换（Transitions）

注：次内容来自zhangxinxu的博客。谢谢他的努力。

其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。于是乎，只要一个整站通用的class，就可以很轻松的渐进增强地实现动画效果，超有实用价值的说。

transition有下面些具体属性：

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

上面的主要用在transition-timing-function里面的参数。表示速度的快慢。

代码：

HTML

    <div id="transBox" class="trans_box"><div class="trans_list ease">ease</div><div class="trans_list ease_in">ease-in</div><div class="trans_list ease_out">ease-out</div><div class="trans_list ease_in_out">ease-in-out</div><div class="trans_list linear">linear</div></div>

CSS代码：

<style type="text/css">.trans_box{padding: 20px;background-color: #f0f3f9;}.trans_list{width: 10%;height: 64px;margin: 10px 0;background-color: #486AAA;color: #fff;text-align: center;}.ease{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;transition: all 4s ease;}.ease_in{-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;transition: all 4s ease-in;}.ease_out{-webkit-transition: all 4s ease-out;-moz-transition: all 4s ease-out;-o-transition: all 4s ease-out;transition: all 4s ease-out;}.ease_in_out{-webkit-transition: all 4s ease-in-out;-moz-transition: all 4s ease-in-out;-o-transition: all 4s ease-in-out;transition: all 4s ease-in-out;}.linear{-webkit-transition: all 4s linear;-moz-transition: all 4s linear;-o-transition: all 4s linear;transition: all 4s linear;}.trans_box:hover .trans_list, .trans_box_hover .trans_list{margin-left: 89%;background-color: #beceeb;color: #333;-webkit-border-radius: 25px;-moz-border-radius: 25px;-o-border-radius: 25px;border-radius: 25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}</style>

此主要实现的效果是从左边移动到右边！~~。根据参数的不同，进行速度的不同。

实例效果图：初始化时：

实例效果图后：

可能有些朋友对这个5个功能不熟悉，所以它们的速度如图：

最后奉献2张有用的图：

CSS 性质

CSS 选择器

算了，就先到这里吧！。希望对你们有用！~。哈哈~~。

CSS 3中有很多非常酷的东西，需要我们共同去挖掘！~。

愿你和你的家人一切安好！~。

作者：Lanny☆兰东才
出处：http://www.cnblogs.com/damonlan
Q Q:*********
E_mail:Damon_lan@163.com or Dongcai.lan@hp.com

本博文欢迎大家浏览和转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，在『参考』的文章中，我会表明参考的文章来源，尊重他人版权。若您发现我侵犯了您的版权，请及时与我联系。

转载于:https://www.cnblogs.com/huashanqingzhu/p/4279184.html

CSS3 必须要知道的10 个顶级命令相关推荐

git bash here创建项目无法选择m_你应该知道的10个Git命令
作者 | Jeff Hale 来源 | Towards Data Science 编辑 | 代码医生团队在本文中,将讨论作为开发人员,数据科学家或产品经理应该了解的各种Git命令.将看看使用Git检 ...
大规模运行MongoDB应该知道的10件事
MongoDB的首席解决方案架构师Asya Kamsky 最近发表了一篇文章,概括了大规模运行MongoDB需要知道的10件事. MongoDB也需要DevOps.MongoDB是一个数据库.和任何其 ...
ftpclient怎么获取到该目录下面得文件_你应该知道的10种Python文件系统方法
使用os和shutil操作文件和文件夹你可以编写Python程序来与文件系统进行交互来做很酷的事情.怎么做并不总是非常清楚.本文是当前和有抱负的开发人员和数据科学家的指南.我们将重点介绍10个基本的 ...
女孩做妻子前应知道的10件事
女孩做妻子前应知道的10件事一段时间的甜蜜恋爱期过后,你和心爱的他终于要踏上期盼已久的红地毯.你发誓一定要做个最幸福的小女人,要成一个永远让丈夫着迷的好妻子.从一个女孩的身份转变为一个妻子的身份前, ...
你应该知道的10件关于Java 6的事情
http://java.sun.com/developer/technicalArticles/J2SE/Desktop/mustang/beta2.html 一文中描述了你应该知道的10件关于Jav ...
女友要悄悄知道的10个事情....(转载)
女友要悄悄知道的10个事情.... 一:爱人就是爱人,只要去爱,不要拿来比较,不要老说别人的老公如何如何好,别数落他没出息,你是他最亲密的人,你还这么说他,好象不太应该,对大多数男人来说,赞赏和鼓励比 ...
程序员应该知道的10大编程格言
作者 | BarryWang 来源 | https://www.cnblogs.com/barrywxx/p/4399007.html 每个程序员都该知道的10大编程格言(Kevin Pang): 编 ...
php怎么调用麦克风,使用麦克风时要知道的10大声学知识
大家在使用麦克风时,有没有想过麦克风有什么声学原理呢,下面给大家介绍一下使用麦克风时要知道的10大声学知识! 一.混响声音在房间内衰减的方式是影响声音录制的重要因素.混响对声音的作用是两面的,可以更 ...
声场测试话筒_麦克风测试/使用时要知道的10个重要声学知识
麦克风测试/使用时要知道的10个重要声学知识 1.混响声音在房间内衰减的方式是影响声音录制的重要因素.混响对声音的作用是两面的,可以更好也可以更坏,混响时间是其中重要的条件.混响时间指的是从声源停止 ...

CSS3 必须要知道的10 个顶级命令

1.边框圆角（Border Radiuas）

2.盒阴影（Box Shadow）

3.透明度（Transparency or RGBA）

4.列数（Columns）布局

5.显示多个背景图片

6.轮廓（outlines）

7.背景渐变（Background Gradients）

8.旋转（Rotate）

9.反射（reflect）

10.转换（Transitions）

CSS3 必须要知道的10 个顶级命令相关推荐

最新文章

热门文章