CSS3基础知识（一）

结构选择器

:nth-child(n) 第几个元素从1开始设置
:nth-child(2n) 偶数元素从0开始设置
:nth-child(2n+1) 奇数元素
:nth-of-type(n)
:first-child ->nth-child(1)
:first-of-type ->nth-of-type(1)
:last-child
:last-of-type
:only-child 仅有一个子元素
:only-of-type 同种类型的子元素只有一个
:empty

否定选择器

:not()

属性选择器

E[attr=val]
E[attr|=val] 只能等于val 或只能以val-开头
E[attr*=val] 包含val字符串
E[attr~=val] 属性值有多个,其中有一个是val
E[attr^=val] 以val开头
E[attr$=val] 以val结尾

标伪类选择器

:target 用来匹配url指向的目标元素
存在url指向该匹配元素时,样式效果才会生效

伪元素

: first-line 匹配第一行文本
: first-letter 匹配第一首字符
: before 和 : after DOM元素前后插入额外的内容

圆角border-radius

border-radius: 1-4个数字 / 1-4个数字

前面是水平半径，后面是垂直半径
四个数字方向分别是左上右上右下左下
不给“/”则水平半径和垂直半径一样
- border-radius: 10px/5px;
- border-radius:60px 40px 30px 20px /30px 20px 10px 5px;
例子 : 圆椭圆半圆扇形

线性渐变

linear-gradient

linear-gradient([ || ,]? , …)
只能用在背景上
颜色是沿着一条直线轴变化
参数
起点：从什么方向开始渐变
》left、top、left top
角度：从什么角度开始渐变
》xxx deg的形式
点：渐变点的颜色和位置
》red 50%，位置可选
重复线性渐变

径向渐变

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);
从“一个点”向多方向颜色渐变
shape形状： ellipse、circle 或设置水平半径,垂直半径
size:渐变的大小，即渐变到哪里停止，有如下关键词:
- closest-side：最近边； farthest-side：最远边；
- closest-corner：最近角； farthest-corner：最远角 (默认值)
position ：关键词|数值|百分比
重复的径向渐变

背景background

background-origin

padding-box 从padding区域显示
border-box 从border区域显示
content-box 从content区域显示

background-clip

padding-box 从padding区域向外裁剪
border-box 从border区域往外裁剪
content-box 从content区域往外裁剪
text 文本裁剪

background-size

100% 100% 百分比
10px 10px 数值
contain 按原始比例收缩,背景图显示完整,但不一定铺满整个容器
cover 按原始比例收缩,背景图可能显示不完整,但铺满整个容器

background-attachment

背景图片是滚动的还是固定的 fixed(固定的) 默认是滚动的

盒子阴影

box-shadow: h v blur spread color inset;
h :水平方向偏移
v : 垂直方向偏移
blur : 模糊半径
spread : 扩展半径
color : 颜色
inset :加上这个表示内阴影默认是外阴影

文本阴影

text-shadow : x y blur color
x轴偏移 y轴偏移模糊度颜色
多层阴影制作文字立体效果 ,设置多种颜色,中间以逗号隔开
文字添加边框
text-stroke: 2px blue
- 通过设定1px的透明边框，可以让文字变得平滑
- 颜色设成透明能创建镂空字体

滤镜

-webkit-filter: normal; 正常

-webkit-filter: grayscale(1); 灰度，取值范围0-1

-webkit-filter: brightness(0. 亮度，取值范围0-1

-webkit-filter: invert(1); 反色5); ，取值范围0-1, 0为原图，1为彻底反色之后

-webkit-filter: sepia(0.5); 叠加褐色，取值范围0-1

-webkit-filter: hue-rotate(30deg); 色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜

-webkit-filter: saturate(4); 饱和度，取值范围0 ~ *, 0为无饱和度，1为原图，值越高饱和度越大

-webkit-filter: contrast(2); 对比度，取值范围0 ~ *, 0为无对比度（灰色），1为原图，值越高对比度越大

-webkit-filter: opacity(0.8); 透明度，取值范围0 ~ 1, 0为全透明，1为原图

-webkit-filter: drop-shadow(0 0 20px red); 阴影

遮罩

mask-image
mask-position
mask-repeat