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