css3干货

时间 2019-12-14

标签 css3 css 干货栏目 CSS 繁體版

原文原文链接

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

前缀html	浏览器css3
-webkitweb	chrome和safarichrome
-moz浏览器	firefox字体
-ms动画	IEui
-ourl	opera

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

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

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

2、阴影（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; }

3、边框应用图片（ 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>

4、颜色

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

5、渐变色彩

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

　　参数：

　　用法：

6、文字与字体

　　text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

7、文本阴影text-shadow

8、一、（background-origin）设置元素背景图片的原始起始位置。

background-origin ： border-box | padding-box | content-box;

二、background-clip 用来将背景图片作适当的裁剪以适应实际须要。

　　　 background-clip ： border-box | padding-box | content-box | no-clip

　　三、background-size 设置背景图片的大小，以长度值或百分比显示，还能够经过cover和contain来对图片进行伸缩。

　　　　background-size: auto | <长度值> | <百分比> | cover | contain

　　　　取值说明：

　　　　一、auto：默认值，不改变背景图片的原始高度和宽度；

　　　　二、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其做为图片宽度值来等比缩放；

　　　　三、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘之前面百分比得出的数值，当设置一个值时同上；

　　　　四、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

　　　　五、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

　　四、multiple backgrounds　　　　

　　　　.demo{
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
　　　　　　background-position: left top, 120px 0, 230px 0;
　　　　　　background-repeat: no-repeat, no-repeat, no-repeat;

　　　　　　margin:0 0 20px 0;
　　　　}

　　　　.task {
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/80% 40%,
　　　　　　url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 50%;
　　　　}

　　9、 css3属性选择器

　　　　1.属性选择器

　　　　　　a[class^=column]{

　　　　　　background: red;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[href$=doc]{
　　　　　　background: green;;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[title*=box]{
　　　　　　background: blue;
　　　　　　color: #fff;
　　　　　　}
　　　　</style>

　　　　2.结构性伪类选择器—root()

　　　　　　“:root”选择器等同于<html>元素，简单点说：

　　　　　　:root{background:orange}

　　　　　　html {background:orange;}

　　　　　　获得的效果等同。

　　　　　　建议使用:root方法。

　　　　3.结构性伪类选择器—not

　　　　　　给表单中除submit按钮以外的input元素添加红色边框，CSS代码能够写成：

　　　　　　form { width: 200px; margin: 20px auto; }

　　　　　　div { margin-bottom: 20px; }

　　　　　　input:not([type="submit"]){ border:1px solid red; }