前端笔记 — CSS3

一. 选择器

1.属性选择器

E[attr]：存在该属性即可

E[attr=val]：属性值等于val

E[attr~=val]：属性值等于val，或者属性值用空格分隔，其中有val

E[attr|=val]：属性值等于val，或者属性值用'-'分隔，其中有val

E[attr*=val]：属性值包含val

E[attr^=val]：属性值以val开头

E[attr$=val]：属性值以val结尾

2.伪类选择器

E:nth-child(n)：查找E的所有兄弟元素，包括它本身，下标从1开始，如果下标n对应的是同类元素则选中，否则不选中

E:nth-last-child(n)：作用与nth-child类似，只是下标从后往前

E:nth-of-type(n)：查找E的所有同类兄弟元素，包括它本身，下标从1开始，选中下标n对应的元素

E:nth-last-of-type(n)：作用与nth-of-type类似，只是下标从后往前

E:first-child：查找E的第一个兄弟元素，可以是它本身，如果是同类元素则选中，否则不选中

E:last-child：作用与first-child类似，只是从后往前

E:first-of-type：选中E的第一个同类兄弟元素，可以是它本身

E:last-of-type：作用与first-of-type类似，只是从后往前

E:only-child：选中没有兄弟元素的E元素

E:only-of-type：选中没有同类兄弟元素的E元素

E:empty：选中没有任何子元素(包括文字、空格、换行)的E元素

3.伪元素选择器

E::selection：可改变选中文本的样式

E::placeholder：可改变placeholder的默认样式

E:before、E::before：在E元素内部最前面添加一个元素

E:after、E::after：在E元素内部最后面添加一个元素

二. 边框

1.边框圆角

border-radius：设置圆角的半径
border-radius: 40px 30px 30px 50px;设置顺序分别为1、2、3、4
border-radius: 50%;表示半径为正方形边长的50%

border-radius: 80px / 40px;表示椭圆的横轴为80px，纵轴为40px
border-radius: 40% / 20%;表示椭圆横轴为宽的40%，纵轴为高的20%，宽高包括边框

2.边框阴影

box-shadow：设置元素的边框阴影，没有边框也可以设置
box-shadow: 5px 5px 5px 5px red;
参数一：阴影的水平偏移量，正数为右，负数为左
参数二：阴影的垂直偏移量，正数为下，负数为上
参数三：阴影的模糊度，数值越大越模糊
参数四：阴影的尺寸，默认情况下，阴影的大小与元素大小一样，如果该值为正，则增大阴影面积，否则为缩小，5px表示阴影上下左右各增加5px，即宽高各增加10px
参数五：阴影的颜色

注意：图中第一个参数与第二个参数写反了

3.边框图片

border-image-source：设置图片路径
border-image-width：设置图片边框的宽度
border-image-slice：图片的切割方式
border-image-repeat：图片的重复方式

如图所示，图片的切割顺序为上右下左(1234)
border-image-slice: 27; //没有单位
border-image-slice 27 40 40 27;
A区域的图片不会被拉伸，只有B区域才可被拉伸
repeat的三种方式：round(平铺、拉伸)、repeat(平铺、裁剪)、stretch(默认，拉伸)

三. 背景

1. background-origin，设置背景图片的位置
   border-box：从边框位置开始显示，即边框也有背景图片
   padding-box：从内边距位置开始显示，即内边距也有背景图片
   content-box：从内容区域开始显示，默认值

2. background-clip，设置背景的裁剪方式，背景颜色也会被裁剪
   border-box：超过边框的裁剪掉，默认值
   padding-box：超过内边距的裁剪掉，即边框没有背景
   content-box：内容区域以外的裁剪掉

3. background-size，设置背景图片尺寸
   contain：固定左上角，等比例缩放，直到某一边充满背景区域
   cover：固定左上角，等比例缩放，直到充满背景区域，超出的部分被裁剪
   也可以通过百分比、像素来设置背景区域的大小

4. background-position，设置背景图片的偏移
   background-position: 50px 30px
   表示水平方向偏移50像素（正右负左），垂直方向偏移30像素（正下负上）

5. background-repeat，设置背景图片的重复方式
   no-repeat：不重复
   repeat-x：水平重复
   repeat-y：垂直重复

五. 渐变

1.线性渐变

沿着某条直线朝一个方向产生渐变效果

//黄色到绿色渐变，默认为从上往下
background-image: linear-gradient(yellow, green);
//多种颜色渐变
background-image: linear-gradient(yellow, green, red);
//从左往右渐变
background-image: linear-gradient(to right, yellow, green);
//向45度方向渐变，向上为0度，向右为90度
background-image: linear-gradient(45deg, yellow, green);
//0-30%：黄色，30%-70%：渐变色，70%-100%：绿色
background-image: linear-gradient(to right, yellow 30%, green 70%);
//0-30%：黄色，30%-50%：黄绿渐变，50%-70%：绿蓝渐变，70%-100%：蓝色
background-image: linear-gradient(45deg, yellow 30%, green 50%, blue 70%);
//由于后面的百分比小于前面的，所以变为与前面相等，即yellow 60%, green 60%
background-image: linear-gradient(90deg, yellow 60%, green 40%);

2.径向渐变

以某点为中心，向四周渐变

//以元素中点为中心，向四周渐变
radial-gradient(yellow, green);
//0-40%：黄色，40%-80%：黄绿渐变，80%-100%：绿色
radial-gradient(yellow 40%, green 80%);
//渐变半径50px，50px以外为绿色
radial-gradient(50px, yellow, green);
//以左上角为中心向四周渐变，渐变半径150px，150px以外为绿色
radial-gradient(150px at left top, yellow, green);
//以(50, 50)为中心向四周渐变，渐变为横轴100px，纵轴50px的椭圆
radial-gradient(100px 50px at 50px 50px, yellow, green);
//渐变为椭圆，横轴为元素宽度一半，纵轴为元素高度一半，如果元素为正方形，则渐变为圆形
radial-gradient(ellipse, yellow, green);

3.重复渐变

repeating-linear-gradient：线性重复渐变
repeating-radial-gradient：径向重复渐变

六. 伸缩布局

1. 设置元素的display属性为flex，则该盒子内部为伸缩布局

2. flex-direction：设置主轴的方向
   row：水平从左往右，默认值
   row-reverse：水平从右往左
   column：垂直从上往下
   column-reverse：垂直从下往上

3. justify-content：设置主轴方向上的对齐方式
   flex-start：向主轴开始的方向对齐，默认值（主轴从左往右，则左对齐）
   flex-end：向主轴结束的方向对齐
   center：居中对齐
   space-between：两端对齐
   space-around：平分

4. align-items：设置侧轴对齐方式
   flex-start（默认值）、flex-end、center
   baseline：以文字基线对齐
   stretch：不指定高度的情况下拉伸

5. flex-wrap：是否换行
   wrap：换行
   nowrap：不换行，默认值

6. align-content：换行情况下，设置行之间的对齐方式
   flex-start、flex-end、center、space-around、space-between、stretch（默认）

7. flex-flow：flex-direction与flex-wrap的简写
   flex-flow: column wrap
8. flex：设置子元素占比

9. align-self：设置该元素在父盒子侧轴上的对齐方式，会覆盖父元素align-items的效果
10. order：设置元素在主轴上的排列顺序，值为数字，从小到大排列
11. flex-grow：如果父盒子存在剩余空间，则将项目放大，设置值为所占剩余空间的份数，0表示不放大!
12. flex-shrink：如果父盒子空间不足，则将项目缩小，设置值为所占缩小空间的份数，0表示不缩小，默认值为1

七. 多列布局

-webkit-column-count：设置列数
-webkit-column-width：设置列宽，当列宽*列数大于盒子总宽，则列数会减少
-webkit-column-gap：设置列之间的宽度
-webkit-column-rule：设置列之间的分界线，参数与border一样
-webkit-column-span：值为all，表示跨所有列

八. 过渡

一种状态过渡到另一种状态
transition-property：要过渡的属性
transition-duration：过渡的持续时间
transition-timing-function：过渡的方式，取值linear、ease、ease-in、ease-out、ease-in-out
transition-delay：延迟多久后开始过渡
transition：可一次性设置上面的属性
transition: width 1s, height 2s; //表示宽度1s过渡完，高度2s过渡完

div {
     width: 200px;
     height: 200px;
     background-color: green;
     transition-property: all; /*所有属性*/
     transition-duration: 1s; /*1s内过渡完成*/
     transition-delay: 0.5s; /*延迟0.5后开始过渡*/
     transition-timing-function: linear; /*线性过渡*/
     /*transition: all 1s linear 0.4s;*/
}

div:hover {
     width: 50px;
     height: 50px;
     background-color: red;
}

九. 动画

animation-name：动画的名称
animation-duration：动画执行时长
animation-delay：延迟一段时间后开始执行
animation-timing-function：动画速度曲线，linear线性
animation-fill-mode：动画执行完后的状态，forwards表示保持最后的状态
animation-iteration-count：动画执行次数，infinite表示无限次
animation-direction：动画播放完后是否逆向播放，默认值为normal，alternate表示逆向播放
animation-play-state：动画播放的状态，running表示播放，paused表示暂停

使用@keyframes定义一个动画

div {
     width: 100px;
     height: 100px;
     background-color: blue;
     animation-name: change;
     animation-duration: 4s;
     animation-delay: 0.3s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-timing-function: linear;
}

@keyframes change {
     0% {width: 30px; height: 30px} /*初始状态，宽高100px，延迟0.3s后开始动画，此时宽高变为30px*/
     25% {width: 30px; height: 300px; background-color: green} /*0-1s，宽度不变，高度变为300px，颜色变为green*/
     50% {width: 300px; height: 300px; background-color: pink} /*1-2s，宽度变为300px，高度不变，颜色变为pink*/
     100% {background-color: red} /*2-4s，颜色变为red，由于没有设置宽高，则会变为初始状态100px*/
}

十. 转换

使用transform设置元素的转换

1. 2d转换
   rotate()：设置旋转角度，正值为顺时针，负值为逆时针。
   例：rotate(45deg)，延锚点顺时针旋转45度
   scale()：设置元素的缩放，绝对值小于1缩小，大于1放大，当值为负数时会发生翻转。
   例：scale(-1.5, 2)，水平方向放大1.5倍并翻转，垂直方向放大2倍
   translate()：设置元素的位移
   例：translate(50px, 80px)，右移50px，下移80px

2. 3d转换
   rotate3d(x, y, z)：设置元素延三条轴的旋转角度
   rotateX()、rotateY()、rotateZ()：设置元素在单个轴上的选择角度
   scale3d(x, y, z)：设置元素在三个方向上的缩放比例
   scaleX()、scaleY()、scaleZ()：设置单个方向上的缩放比例
   translate(x, y, z)：设置元素在三个方向上的位移尺寸
   translateX()、translateY()、translateZ()：设置单个方向上的位移

3. 其他属性
   transform-origin：设置元素的锚点，默认为元素的中点
   perspective：设置视距，需要设置在父元素上，只影响3d转换效果，值越小越明显

perspective-origin：设置灭点的位置，默认为中点，设置在父元素上

transform-style：设置子元素是否在3d平面呈现，默认为flat
如图，子元素旋转60deg的情况，flat时，子元素始终在父元素的平面上