彻底掌握CSS3
1.CSS3新增选择器
2.CSS属性划分和前缀标准写法顺序
CSS3 被划分为模块,其中最重要的 CSS3 模块包括
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
CSS3属性前缀和标准写法顺序
- Trident内核:前缀为-ms ,主要代表为IE浏览器
- Gecko内核:前缀为-moz,主要代表为Firefox
- Presto内核:前缀为-o,主要代表为Opera
- Webkit内核:前缀为-webkit,产要代表为Chrome和Safari
3.CSS3常用属性之border-radius圆角
设置或检索对象使用圆角边框
- 提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
- 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 垂直半径也遵循以上4点。
取值情况
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
4.CSS3常用属性之box-shadow盒子阴影
设置或检索对象阴影
- none: 无阴影
- length ①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- length ②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- length ③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- length ④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
- color: 设置对象的阴影的颜色。
- inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
5.CSS3常用属性之text-shadow文字阴影
设置或检索对象中文本的文字是否有阴影及模糊效果
- none: 无阴影
- length ①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
- length ②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
- length ③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
- color : 设置对象的阴影的颜色
5.CSS3常用属性之linear-gradient线性渐变
语法: 可以使用角度或者关键字;
- background: linear-gradient(direction, color-stop1, color-stop2, …)
- background: linear-gradient(angle, color-stop1, color-stop2);
6.CSS3常用属性之背景新增属性
background-origin属性的详解
- 设置或检索对象的背景图像计算 background-position 时的参考原点(位置)
- padding-box: 从padding区域(含padding)开始显示背景图像。
- border-box: 从border区域(含border)开始显示背景图像。
- content-box: 从content区域开始显示背景图像。
background-clip属性的详解
- 指定对象的背景图像向外裁剪的区域
- padding-box: 从padding区域(不含padding)开始向外裁剪背景。
- border-box: 从border区域(不含border)开始向外裁剪背景。
- content-box: 从content区域开始向外裁剪背景。
- text: 从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果
p{width:200px;height:200px;margin:0;padding:20px;border:10px dashed #666;
background:#aaa url(img.jpg) no-repeat;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;font-weight:bold;font-size:120px;}
<p>从前景内容的形状作为裁剪区域向外裁剪背景</p>
background-size属性的详解
- 检索或设置对象的背景图像的尺寸大小。
- 该属性提供2个参数值(特性值cover和contain除外)。
- 如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
- 如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
取值:
- length:用长度值指定背景图像大小。不允许负值。
- percentage:用百分比指定背景图像大小。不允许负值。
- auto: 背景图像的真实大小。
- cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
- contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。