1.边框圆角(Border Radiuas)

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

  1. #box1 {
  2. border: 1px solid #699;
  3.  
  4. /* for Mozilla Firefox */
  5. -moz-border-radius: 20px;
  6.  
  7. /* for Safari & Google Chrome */
  8. -webkit-border-radius: 20px;
  9. }

实例效果图:

2.盒阴影(Box Shadow)

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

  1. #box1
  2. {
  3. border: 1px solid #699;
  4. -moz-box-shadow: 5px -5px 5px #b6ebf7;
  5. -webkit-box-shadow: 5px -5px 5px #b6ebf7;
  6. width: 100px;
  7. height: 100px;
  8. margin-left: 100px;
  9. margin-top: 100px;
  10. background-color:Gray;
  11. border-color:Yellow;
  12. }

需要注意的是,它有4个参数:

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

第二个参数:垂直偏移的位置。它也有正数或者负数。如果是正数的话,那么表示下(bottom)边框有阴影;否则如果是负数的话,那么它的上(top)边框有阴影。

第三个参数:阴影的大小

第四个参数:颜色,这个很好理解。

实例效果图:

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

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

代码如下:

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

实例效果图:

很酷吧!

3.透明度(Transparency or RGBA)

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

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

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

  1. #myElement {
  2. opacity: .7;
  3. }

IE下的CSS透明度

  1. #myElement {
  2. filter: alpha(opacity=40);
  3. }

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

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

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

  1. #myElement {
  2. -khtml-opacity: .5;
  3. -moz-opacity: 0.5;
  4. }

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

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

代码如下:

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

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

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

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

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

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

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

实例效果图:

4.列数(Columns)布局

就是说可以把框框内部的内容分成几个列数。

先上代码:

  1. #box1
  2. {
  3. border: 1px solid #699;
  4. /* for Mozilla Firefox */
  5. -moz-column-count: 2;
  6. -moz-column-gap: 20px;
  7. -moz-column-rule: 1px solid #6e8eb9;
  8.  
  9. /* for Safari & Google Chrome */
  10. -webkit-column-count: 2;
  11. -webkit-column-gap: 20px;
  12. -webkit-column-rule: 1px solid #6e8eb9;
  13.  
  14. margin-left: 100px;
  15. margin-top: 100px;
  16. border-color: Yellow;
  17. background-color:Gray;
  18. }

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

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

实例效果图:

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

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

5.显示多个背景图片

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

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

代码如下:

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

实例效果图:

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

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

这样子才OK.

6.轮廓(outlines)

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

代码如下:

  1. #box1
  2. {
  3. border: 1px solid #000;
  4. outline: 1px solid #699;
  5. outline-offset: -20px;
  6. border: 1px solid #699;
  7. padding: 0 20px;
  8. margin-left: 100px;
  9. margin-top: 100px;
  10. border-color: Yellow;
  11. background-color: Gray;
  12. width: 400px;
  13. height: 300px;
  14. }

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

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

实例效果图:

7.背景渐变(Background Gradients)

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

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

Firfox 的代码:

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

Chrome or safari的代码:

  1. 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)

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

代码:

  1. #box1
  2. {
  3. border: 1px solid #000;
  4. -moz-transform: rotate(20deg);
  5. -webkit-transform: rotate(20deg);
  6. border: 1px solid #699;
  7. padding: 0 20px;
  8. margin-left: 100px;
  9. margin-top: 100px;
  10. border-color: Yellow;
  11. background-color: Gray;
  12. width: 400px;
  13. height: 300px;
  14. }

rotate(角度)里面的数组就是角度的意思,deg是英文单词degree的缩写 度数的意思。

实例效果图:

注意:

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

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

9.反射(reflect)

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

代码如下:

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

实例效果图:

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

  1. <div id="transBox" class="trans_box">
  2. <div class="trans_list ease">
  3. ease</div>
  4. <div class="trans_list ease_in">
  5. ease-in</div>
  6. <div class="trans_list ease_out">
  7. ease-out</div>
  8. <div class="trans_list ease_in_out">
  9. ease-in-out</div>
  10. <div class="trans_list linear">
  11. linear</div>
  12. </div>

CSS代码:

  1. <style type="text/css">
  2. .trans_box
  3. {
  4. padding: 20px;
  5. background-color: #f0f3f9;
  6. }
  7. .trans_list
  8. {
  9. width: 10%;
  10. height: 64px;
  11. margin: 10px 0;
  12. background-color: #486AAA;
  13. color: #fff;
  14. text-align: center;
  15. }
  16. .ease
  17. {
  18. -webkit-transition: all 4s ease;
  19. -moz-transition: all 4s ease;
  20. -o-transition: all 4s ease;
  21. transition: all 4s ease;
  22. }
  23. .ease_in
  24. {
  25. -webkit-transition: all 4s ease-in;
  26. -moz-transition: all 4s ease-in;
  27. -o-transition: all 4s ease-in;
  28. transition: all 4s ease-in;
  29. }
  30. .ease_out
  31. {
  32. -webkit-transition: all 4s ease-out;
  33. -moz-transition: all 4s ease-out;
  34. -o-transition: all 4s ease-out;
  35. transition: all 4s ease-out;
  36. }
  37. .ease_in_out
  38. {
  39. -webkit-transition: all 4s ease-in-out;
  40. -moz-transition: all 4s ease-in-out;
  41. -o-transition: all 4s ease-in-out;
  42. transition: all 4s ease-in-out;
  43. }
  44. .linear
  45. {
  46. -webkit-transition: all 4s linear;
  47. -moz-transition: all 4s linear;
  48. -o-transition: all 4s linear;
  49. transition: all 4s linear;
  50. }
  51. .trans_box:hover .trans_list, .trans_box_hover .trans_list
  52. {
  53. margin-left: 89%;
  54. background-color: #beceeb;
  55. color: #333;
  56. -webkit-border-radius: 25px;
  57. -moz-border-radius: 25px;
  58. -o-border-radius: 25px;
  59. border-radius: 25px;
  60. -webkit-transform: rotate(360deg);
  61. -moz-transform: rotate(360deg);
  62. -o-transform: rotate(360deg);
  63. transform: rotate(360deg);
  64. }
  65. </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

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

CSS3必须要知道的10个顶级命令的更多相关文章

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

    来源:http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html 作者:浪迹天涯 1.边框圆角(Border Radiuas) 这个 ...

  2. 【转载】在IT界取得成功应该知道的10件事

     在IT界取得成功应该知道的10件事 2011-08-11 13:31:30 分类: 项目管理 导读:前面大多数文章都是Jack Wallen写的,这是他的新作,看来要成为NB程序员还要不停的自我总结 ...

  3. 你应该知道的10个奇特的 HTML5 单页网站

    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...

  4. (0)开始 Raspberry Pi 项目前需要知道的 10 件事

    https://www.digikey.cn/zh/articles/techzone/2017/feb/10-things-to-know-before-starting-a-raspberry-p ...

  5. 希望早几年知道的5个Unix命令

    原文: http://spin.atomicobject.com/2013/09/09/5-unix-commands/ 希望早几年知道的5个Unix命令 使用*nix系统已经有一段时间了.但是还是有 ...

  6. 每一个JavaScript开发者都应该知道的10道面试题

    JavaScript十分特别.而且差点儿在每一个大型应用中起着至关关键的数据.那么,究竟是什么使JavaScript显得与众不同,意义非凡? 这里有一些问题将帮助你了解其真正的奥妙所在:   1.你能 ...

  7. (转)程序员应该知道的10个eclipse调试技巧

    调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试技巧, ...

  8. 你应该知道的16个linux命令

    Linux常用命令很多比如cd.ls.pwd.du.df.tail.head.yum.mv.touch.mkdir.cp.tar等,根据工作内容不同,经常使用的命令也不同,比如运维人员使用tail.h ...

  9. Web设计新手应知道的10个锦囊妙计

    摘要:你在网页设计所学到的大多数教训都来自工作经验.学习是一个反复持续的过程,并且没有比犯错更好的方式来获得知识.在本文中,我们将讨论10个重要并常规的技巧,这是每位Web设计师新手都应该知道. 在做 ...

随机推荐

  1. Linux命令:简单函数调用

    脚本编程之函数: function: 功能       结构化编程,不能独立运行,需要调用时执行,可以被多次调用 1.定义一个函数:function FUNCNAME {  command} FUNC ...

  2. Mobius 反演

    上次看莫比乌斯繁衍反演是一个月前,讲道理没怎么看懂.. 然后出去跪了二十天, 然后今天又开始看发现其实并不难理解   开个这个仅记录一下写过的题. HAOI 2011 B   这应该是莫比乌斯反演的模 ...

  3. tomcat密码的坑

    <role rolename="tomcat"/> <role rolename="role1"/> <user username ...

  4. BZOJ3207: 花神的嘲讽计划Ⅰ

    显然hash,然后stl随便搞. #include<bits/stdc++.h> #define N 100005 using namespace std; typedef unsigne ...

  5. FFT质数打表程序

    #include<bits/stdc++.h> using namespace std; typedef long long ll; void sol(ll x){ int y=0; fo ...

  6. hdu 1318 Palindromes

    Palindromes Time Limit:3000MS     Memory Limit:0KB     64bit                                         ...

  7. How to save milliseconds to DB in NHibernate

    We need to configure Timestamp in Mapping. eg. Map(x => x.ResponseDate).CustomType("Timestam ...

  8. python中单引号,双引号,多引号区别

    先说1双引号与3个双引号的区别,双引号所表示的字符串通常要写成一行如:s1 = "hello,world"如果要写成多行,那么就要使用\ (“连行符”)吧,如s2 = " ...

  9. canvas代替img渲染图片

    移动端用canvas代替img渲染图片,可以提高性能 var oImg = new Image(); oImg.src = url; oImg.onload = function(){ var cvs ...

  10. Yii2的深入学习--自动加载机制(转)

    Yii2 的自动加载分两部分,一部分是 Composer 的自动加载机制,另一部分是 Yii2 框架自身的自动加载机制. Composer自动加载 对于库的自动加载信息,Composer 生成了一个  ...