-
CSS3基础
渐变背景
像规则的渐变，可以使用1px的渐变背景平铺，像不规则的渐变背景，只能裁剪为一张图片。通过图片来实现渐变，维护性比较低，影响网页的加载速度。
CSS 3 提出了背景的渐变：线性渐变和径向渐变
渐变背景可以看作一个“图像”，使用属性background-image或简写 background。
线性渐变
概念:线性渐变就是沿着一条直线进行颜色的渐变。
注意：渐变至少有两个颜色
语法：
background-image:linear-gradient(渐变方向 , 颜色1 位置，颜色2 位置， 颜色3 位置)；渐变方向
to 方位单词
- to left ——>-90deg 或者270deg
- to top——0deg
- to right——90deg或者 -270deg
- to bottom —— 180deg或者-180deg
- to top left—— -45deg或者315deg
- to top right —— 45deg或者 -315deg
- to bottom left —— -135deg或者225deg
- to bottom right —— 135deg或 -225deg
角度：必须带deg单位，0deg的方向是垂直向上，顺时针是正方向，逆时针是负方向
色标：是由一个颜色和一个位置构成，色标可以写多个
颜色：单词、#十六进制 、rgb、rgba
位置：百分比，像素
只设置颜色，渐变默认是均匀渐变
如果首尾的颜色不在0%或者100%，那么默认是首尾颜色的纯色
/*0%~20%是red，20%~40%是红到绿的渐变，40%~80%是绿色到粉色的渐变，80%~100%是粉色 */ background-image: linear-gradient(red 20%,green 40%,pink 80%);如果两个颜色的位置相同，那么中间渐变的范围为0 ，就会出现断层的效果
background-image: linear-gradient(red 20%,green 20%,pink 80%);
重复线性渐变
将线性渐变重复铺设，使用
repeating-linear-gradient注意：只有首尾不在0%或者100%时，重复线性渐变才有效
语法：
background-image: repeating-linear-gradient(pink 0px, pink 20px,yellow 20px ,yellow 40px);
径向渐变
概念：径向渐变就是椭圆渐变，渐变是沿着椭圆的半径径向渐变，圆其实是一种特殊椭圆
分为两部分：
- 椭圆：用来控制径向渐变的位置、大小、形状等
- 色标：是由一个颜色和一个位置构成，用来控制渐变颜色变化
语法：
background-image:radial-gradient(大小 形状 at x轴 y轴, 颜色1 位置，颜色2 位置，颜色3 位置 ...)；大小
farthest-corner：默认值，半径是圆心到最远角farthest-side：半径是圆心到最远边closest-corner：半径是圆心到最近角closest-side：半径是圆心到最近的边
形状：
ellipse：椭圆 默认值circle：正圆
圆心：at x轴 y轴 可以控制径向渐变位置，默认圆心在盒子的中心点，center center
- 单词：left right center top bottom 两两搭配使用
- 像素
- 百分比：参考的盒子的宽和高 50% 50%相当于center center
重复径向渐变
将径向渐变重复铺设
注意：只有首尾不再0%或100%时，重复径向渐变才有效
语法：
background-image: repeating-radial-gradient(#ccc 0px,#ccc 5px, #666 5px, #666 10px);
圆角原理
盒子默认四个角都是直角，通过border-radius设置圆角的效果
语法：
分别设置四个角的圆角 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 复合属性 border-radius 一个值：四个角同时设置 两个值：左上右下 右上左下 三个值：左上 右上左下 右下 四个值：左上 右上 右下 左下 八个值：50px 50px 50px 50px / 100px 100px 100px 100px; 注意: /前面代表每个角的水平半径，/后面代表每个角的垂直半径圆角的形成：取一个椭圆或者正圆的一段圆弧
如果垂直半径和水平半径相等，取的时正圆的圆弧，如果水平半径和垂直半径不等，取的是椭圆的圆弧。
内半径和外半径
- 当边框的足够宽时，设置的border-radius大于边框的宽度，边框外层的圆角是外半径的形成，边框内部的圆角是内半径形成
- 内半径=外半径 - 边框的厚度
- 注意：当border-radius的大小小于边框时，内半径为负，不能渲染，默认为0，当border-radius（外半径）大于边框时，内半径为正，边框内部采用圆角的效果
应用场景：
- 绘制正圆：盒子的宽高相等，设置border-radius：50%
- 绘制胶囊状：设置border-radius为短边的一半
盒子阴影
使用
box-shadow给盒子添加阴影语法：
box-shadow:x轴偏移量 y轴偏移量 虚化程度 阴影大小 颜色； 虚化程度和阴影大小可以不写 box-shadow:x轴偏移量 y轴偏移量 颜色； 将外部阴影转为内部阴影 box-shadow:x轴偏移量 y轴偏移量 虚化程度 阴影大小 颜色 inset； 可以设置多层的阴影，中间使用逗号隔开 box-shadow：x轴偏移量 y轴偏移量 虚化程度 阴影大小 颜色，x轴偏移量 y轴偏移量 虚化程度 阴影大小 颜色，x轴偏移量 y轴偏移量 虚化程度 阴影大小 颜色；box-shadow:20px 10px 20px 12px black ;- 第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
- 第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
- 第三个值：阴影的模糊半径，虚化程度 可省略
- 第四个值：阴影的大小 可省略
- 第五个值：阴影的颜色
外部阴影(默认值)/内部阴影(inset在属性值最后添加)
多层阴影，之间使用逗号隔开
文字阴影
text-shadow给文本添加阴影语法：
text-shadow:x轴偏移量 y轴的偏移量 虚化程度 颜色；
结构选择器
- 根据html代码结构找到对应的标签，也是伪类选择器
:first-child
找到满足条件的标签，并且这个标签是某个元素里面的第一个子标签
/*找到页面中的所有class名为box的标签里面所有的后代p标签，并且这个p标签必须是某个标签的第一个子元素*/ .box p:first-child{ }
:last-child
找到满足条件的标签，并且这个标签是某个标签的倒数第一个子标签
/*找到页面中的所有class名为box的标签里面所有的后代p标签，并且这个p标签必须是某个标签的最后一个子元素*/ .box p:last-child{ }
:nth-child(n)
找到满足条件的标签，并且这个标签是某个标签的第n个子标签
/*找到页面中所有class名为box的标签里面的所有后代p标签，并且这个p标签是某个标签第n个子元素*/ .box p:nth-child(n){ }找到偶数行的子标签：
:nth-child(2n)/:nth-child(even)找到奇数行的子标签：
:nth-child(2n-1)或:nth-child(2n+1)/:nth-child(odd)
:nth-last-child(n)
找到满足条件的标签，并且这个标签是某个标签的倒数第n个子标签
/*找到页面中所有class名为box的标签里面的所有后代p标签，并且这个p标签是某个标签倒数第n个子元素*/ .box p:nth-last-child(n){ }
:nth-of-type(n)
找到满足条件的标签，将标签筛选出来，重新排序，找到其中的第n个标签
/*找到页面中所有class名为box的标签里面的所有后代p标签，将p标签按照代码顺序重新排序，找到其中的第n个标签 */ .box p:nth-of-type(n){ }
:nth-last-of-type(n)
找到满足条件的标签，将标签筛选出来，重新排序，找到其中的倒数第n个标签
/*找到页面中所有class名为box的标签里面的所有后代p标签，将p标签按照代码顺序重新排序，找到其中的倒数第n个标签 */ .box p:nth-last-of-type(n){ }
CSS3滤镜filter（了解）
filterCSS属性将模糊或颜色偏移等图形效果应用于元素。语法：
filter: 函数(); /*例如：*/ filter: blur(5px); blur模糊处理 数值越大越模糊
calc()
此CSS函数让你在声明CSS属性值时执行一些计算。
语法：
width: calc(100% - 80px); 括号里面可以使用 + - * / 来进行计算。