CSS3

选择器

基本选择器

E
.class
#id
E F
E > F //只能选择某个元素的直接子元素,不包含孙子元素以及往后的元素
E + F //F在E的后面并且相邻,是选择E后面的相邻兄弟元素
ul li + li

<ul>
    <li></li>
    <li></li> *
    <li></li> *
    <li></li> * 
    <li></li> *
</ul>

E ~ F //通用兄弟选择器
ul li ~ li 2和5
ul li + li 2

<ul>
    <li></li>
    <li></li>
    <a></a>   
    <a></a>
    <li></li>
</ul>

属性选择器

E[attr]
只要有attr属性,不管有没有值都会被选中
E[attr="value"]
必须有attr属性,值必须是value
最好加引号,如果不加则要符合css标识规范
E[attr^="value"]
a[href^="http://"]
以http://开头的所有a都会被选中
E[attr$="value"]
img[src$=".png"] 以.png结尾都会被选中
E[attr="value"]*
包含value
E[attr~="value"]
如果属性值包含很多的单词,并且这些单词是以空格隔开的话,以此方式进行选择
<a title="hello world"></a>
a[title~="hello"]
E[attr|="value"]

<div lang="zh-cn"></div>
div[lang|="zh"]

伪类和伪元素选择器

Paste_Image.png

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .nth p:nth-child(2){
     color: red;    //必须是.nth第一个元素且必须是p标签
 }
.nth p:nth-of-type(2){
     color: blue;//先去找p标签,然后再找第一个p
 }
.nth p:empty{
     color:green;
}
.nth:not(p){
     font-weight:bold;
}
 </style>
</head>
<body>
 <div class="nth">
   <div>div</div> 
   <p>p</p>
   <p>p</p>    
   <p></p>
   <p>p</p>
   <p>p</p>
   <p>p</p>
 </div>
</body>
</html>

伪元素可以写一个或两个冒号

圆角

border-radius
如果需要设定四个值,从左上开始顺时针

border-radius:30px 50px 70px 100px;

盒阴影

box-shadow: h-shadow v-shadow blur spread color inset

box-shadow:10px 10px 10px 0 red outset;

水平方向偏移量竖直方向偏移量模糊扩展颜色内外阴影

边界图片

border-image: source slice width outset repeat
要使用的图像缩放宽度外部绘制的量重复属性

border-image:url('border.jpg')

背景

background-clip
指定背景绘制区域

background-clip:border-box|padding-box|content-box

background-origin
背景图像定位,指定background-position属性应该是相对位置

background-origin:border-box|padding-box|content-box

background-size
指定背景图像大小

background-size:length|percentage|cover|contain

background-size:100%;    //只设定第一个值时,第二个值根据图片宽度值等比缩放
background-size:100px;    //指定大小同理
background-size:cover;    //将背景图片等比缩放以填满整个屏幕
background-size:contain    //将背景图片等比缩放至某一边紧贴容器边缘为止

多重背景图像

background-image:url(img.jpg),url(img2.png);

背景属性整合

background:color position size repeat origin clip attachment image

渐变

线性渐变

background: linear-gradient(direction,color-stop1,color-stop2,...) //默认从上到下

background: linear-gradient(to right,red,blue);    //从左到右.标准写法

使用角度更好

//0deg创建从上到下的渐变,90deg将创建一个从左到右的渐变
background: linear-gradient(90deg,rgba(255,0,0,0),rgba(255,0,0,1));

image.png

转换

Transform

让元素在一个坐标系统中变形,这个属性包含一系列变形函数,可以移动,旋转和缩放元素

2D转换

rotate() 旋转
translate() 平移
scale() 缩放
skew() 扭曲或斜切
matrix() 矩阵或混合

transform:rotate(angle)
angle指旋转角度,正数顺时针,负数逆时针

transform:rotate(30deg);

transform:translate(x,y)
transform:translateX(x)
transform:translateY(y)

transform:translate(300px,100px);

transform:scaleX(x)
transform:scaleY(y)
transform:scale(x,y)

transform:scaleX(.5);

**skewX(x)
skewY(y)
skew(x,y)
**

transform:skew(20deg,20deg);

3D转换

rotate3d()
translate3d()
scale3d()
matrix3d()
perspective()

屏幕快照 2017-06-06 下午10.21.40.png

transform:rotateX(angle)
transform:rotateY(angle)
transform:rotateZ(angle)
transform:rotate3d(x,y,z,angle)
前三个参数分别表示旋转的方向x,y,z,第四个参数表示旋转的角度,参数不允许省略

transform:rotate3d(.1,1,1,45deg);

x,y,z只有0和非0的区别,如果是0没有变化,如果都是非0的状态时,会根据大小(不超过1)来反映出程度.-1代表逆时针,1代表顺时针
transform:translateZ(z)
transform:translate3d(x,y,z)

transform:translate3d(200px,200px,200px);

transform:scaleZ(z)
transform:scale3d(x,y,z)

transform:scale3d(1.5,1.5,1.5);      //参数不能省略

Transform与坐标系统

transform-origin:x-axis y-axis z-axis
允许更改转换元素的位置

transform-origin:left top;

扩展属性

transform-style:flat | preserve-3d;
指定嵌套元素是怎样在三维空间中呈现

perspective属性

指定观察者[z=0]平面的距离,使具有三维位置变换的元素产生透视效果

perspective:100px;
perspective-origin:top;    //视角的角度

backface-visibility:visible | hidden
指定元素背面面向用户时是否可见

选择器