结构选择器
: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