css3干货

Posted 2020-08-03

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

 

一、圆角（border-radius）是向元素添加圆角边框。

      border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 

二、阴影 （box-shadow）

　　box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

　　

　　注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

　　.box_shadow
　　　　{ 　　

             box-shadow:4px 2px 6px #333333 inset; 　　

           }

　　添加多个阴影：

　　以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

　　.box_shadow{ box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset; }

 

三、边框应用图片（ border-image）

　　border-image的语法：

　　

代码：

　　#border_image {
　　　　margin:0 auto;
　　　　height:100px;
　　　　line-height:100px;
　　　　text-align:center;
　　　　font-size:30px;
　　　　width:450px;
　　　　border:15px solid #ccc;
　　　　border-image:url(images/1.jpg) 70 repeat;
　　}
　　<div id="border_image">
　　　　 请为我镶嵌上漂亮的画框吧
　　</div>

四、颜色

      background-color:rgba(100,120,60,0.5);

五、渐变色彩

      CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

　　参数：

　　　　   

　　用法：

　　

6、未完，待续！