CSS3常用属性（颜色、边框和渐变等）

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

1.介绍

• 颜色
• 文本
• 盒模型中的 box-sizing 属性
• 处理兼容性问题：私有前缀
• 边框
• 背景属性
• 渐变

2.具体属性

2.1 颜色

1.增加了透明度A

2.两种方式

• rgba(0, 0, 255, 0.3);
• hsla(240,50%,50%,0.4);

3.设置透明度的其他方式

• opacity: 0.3， 会将整个盒子及子盒子设置透明度。
• background: transparent; 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。

2.2 文本

1.text-shadow：设置文本的阴影，如：

text-shadow: 20px 27px 22px pink;//水平位移 垂直位移 模糊程度 阴影颜色。

2.应用：凹凸文字效果（可以设置多个阴影，用逗号隔开）

2.3 盒模型中的 box-sizing 属性

box-sizing: content-box;//标准盒模型
box-sizing: border-box;//IE盒模型

2.4 处理兼容性问题：私有前缀

• -webkit-: 谷歌 苹果
• -moz-:火狐
• -ms-：IE
• -o-：欧朋

2.5 边框

• 边框圆角
• 边框阴影
• 边框图片

2.5.1 边框圆角

• 详细解释参考百度经验：https://jingyan.baidu.com/article/1876c852549b2a890b1376bf.html
• 边框默认为矩形直角，但添加border-radius属性后4个角就发生变化了，值一般设置水平和垂直方向的半径。本demo中width=height=100px
• 圆形：