CSS3复习笔记

选择器

属性选择器

• E[attr=value] 选中E元素中属性有attr的且属性值为value的元素
• E[attr^=value] 选中E元素中属性有attr的且属性值以value开头的元素
• E[attr$=value] 选中E元素中属性有attr的且属性值以value结尾的元素
• E[attr*=value] 选中E元素中属性有attr的且属性值包含value的元素

伪类序号选择器

• E:first-child 选中E元素的父元素下所有的子元素的第一个元素，如果类型为E选中否则无效
• E:last-child 选中E元素的父元素下所有的子元素的最后一个元素，如果类型为E选中否则无效
• E:nth-child(n) 选中E元素的父元素下所有的子元素的第n个元素，如果类型为E选中否则无效
• E:nth-last-child(n) 选中E元素的父元素下所有的子元素的倒数第n个元素，如果类型为E选中否则无效

伪元素选择器

• E::before 选中E元素的内容前伪元素
• E::after 选中E元素的内容前伪元素

颜色

rgba

• rgba(R,G,B,A)

• R：红色值。

  G：绿色值。

  B：蓝色值。

  A：Alpha透明度。取值0~1之间。

阴影

text-shadow

• text-shadow: h-shadow v-shadow blur color;
• h-shadow：阴影横向偏移
• v-shadow：阴影纵向偏移
• blur：阴影模糊度
• color：阴影颜色

box-shadow

• box-shadow: h-shadow v-shadow blur spread color inset;
• h-shadow：阴影横向偏移
• v-shadow：阴影纵向偏移
• blur：阴影模糊度
• spread：阴影的延伸
• color：阴影颜色
• inset：内阴影

盒模型

box-sizing

• box-sizing: content-box|border-box|inherit;
• content-box：从内容开始计算宽度
• border-box：从边框开始计算宽度
• inherit：继承

渐变

linear-gradient

• background-image:linear-gradient(direction,startColor,endColor)
• direction：渐变方向to right|left|top|bottom 可以使用角度 deg
• startColor：渐变开始颜色
• endColor：渐变结束颜色

radial-gradient

• background-image:radial-gradient(radius at position,startColor,endColor)
• radius：半径
• position：放射原点定位
• startColor：渐变开始颜色
• endColor：渐变结束颜色

背景尺寸

background-size

• background-size: length|percentage|cover|contain;
• length：宽度 高度 单位px
• percentage：宽度 高度 单位%
• cover：等比缩放背景完全铺满容器，多余被裁剪
• contain： 等比缩放背景完全显示在容器内容，可能铺不满

过渡

transition

• transition 需要过渡的属性 过渡时间 过渡的动画速度函数 过渡的延时时间
• transition-property 需要过渡的属性
• transition-duration 过渡时间单位秒
• transition-timing-function 过渡的动画速度函数 如：ease linear
• transition-delay 过渡的延时时间单位秒

转换

transform

• transform 转换属性 属性值为不同的转换形式
• scale 缩放
• translate 位移
• rotate 旋转
• skew 倾斜
• transform-origin 转换中心

动画

animation

• animation 动画属性
• animation-name 动画序列名称
• animation-duration 动画时长
• animation-timing-function 动画速度函数
• animation-delay 动画延时
• animation-iteration-count 动画执行次数 无数次 infinite
• animation-direction 动画播放方向 默认normal 逆播放 alternate
• animation-play-state 动画的播放状态 默认 running 暂停 paused
• animation-fill-mode 动画结束状态 默认 backwards 保持 forwards

扩展内容

边框图片

属性

• 属性名称：border-image
• 组合写法：border-image: url("images/border01.jpg") 167/20px stretch
• 拆分写法：
  • border-image-source: url("images/border01.jpg"); 图片地址
  • border-image-slice: 167; 裁剪尺寸
  • border-image-width: 20px 边框宽度
  • border-image-repeat: repeat; 平铺方式 默认 stretch round repeat

原理

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

4.png

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

6.png

1、round和repeat之间的区别

round 会自动调整尺寸，完整显示边框图片。

7.png

repeat 单纯平铺多余部分，会被“裁切”而不能完整显示。

8.png

2、更改裁切尺寸

border-image-slice: 34 36 27 27 分别设置裁切如下图

9.png

10.png