与CSS显示效果相关的属性。包括：
visibility可见性、透明度、渐变、background背景、border边框

CSS（四）视觉属性

一、visibility可见性

visibility属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。取值范围如下：

值	描述
visible	（默认值），可见
hidden	不可见，但是元素依然占据原本的空间
collapse	当在表格元素中使用时，此值可删除一行或一列。如果用在其它元素上，表现和hidden一致
inherit	继承父元素的visibility属性值

关于collapse的效果，请看《前端练习》项目

二、透明度

2.1、opacity

opacity 属性设置元素的不透明级别。取值范围：从0.0（完全透明）到1.0（完全不透明）。默认值为1.0

2.2、rgba()

rgba()是一个函数，应用在color或者background属性上。

rgba(red, green, blue, alpha)
//red: 0-255
//blue: 0-255
//green: 0-255
//alpha: 0.0-1.0，表示透明度

三、dispaly、visibility、opacity比较

比较 3 种元素隐藏方法

	display:none	visibility:hidden	opacity:0
布局变化	元素占据的空间消失	空间不消失	空间不消失
影响	回流、重绘	重绘	重绘
能否被点击触发事件	不能	不能	能

• visibility具有继承性，给父元素设置visibility:hidden;，子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
• opacity也有继承性，但是父元素隐藏后，给子元素设opacity:1;，子元素也不会显示

四、background背景

background是一个简写属性，包含了所有的背景属性，包括：

属性	说明
background-color	背景颜色
background-image	背景图像
background-size	背景图像的大小
background-repeat	如何重复背景图像
background-position	背景图像的位置
background-origin	背景图像的定位区域
background-clip	背景的绘制区域
background-attachment	背景是否固定或随着页面滚动

4.1、background-color

background-color 属性为元素设置一种纯色。渐变作为它的值无效！

background-color的范围包括：content + padding + border，但不包括margin

取值范围：

值	描述
transparent	（默认值），背景颜色为透明
color	颜色名
rgb值	颜色的rgb值，如rgb(0,0,0)、rgba(0,0,0,0.5)
hex值	颜色的十六进制表示，如 #fff
inherit	继承父元素的该属性

4.2、background-image

background-image 属性为元素设置背景图像。

可能值	说明
none	（默认值），不显示背景图像
url(‘’)	图像文件的路径
linear-gradient()	线性渐变
radial-gradient()	径向渐变
inherit	继承父元素属性值

默认情况下，背景图像的大小为原始图像大小，位置起点是左上角，当图像不足以填满背景区域时，会重复。而这些行为都可以通过下面的属性进行改变。

4.2.1 background-position

background-position 属性设置背景图像的起始位置。默认为左上角。取值范围如下：

值（左边表示x轴，右边表示y轴位置）	描述
top left	用top、center、bottom决定x轴的位置，用left、center、right决定y轴的位置。 当只给一个值时，那么第二个值自动为center
x% y%	用百分比的形式表示位置
x单位 y单位	用数值+单位的形式表示位置

细节探究见【前端练习】

4.2.2 background-size

background-size 属性规定背景图像的尺寸

background-size: length|percentage|cover|contain;

值	描述
cover	等比放大，直到背景图像的宽和高都覆盖了背景区域
contain	等比放大，只要背景图像的宽或高，其中一直达到了背景区域大小即可
percentage	父元素的百分比，第一个设置宽度、第二个设置高度。如果只提供一个，高度默认为auto（等比例变化）
length	直接设置背景图像宽度、高度的大小。如果只设置一个，高度默认为auto（等比例变化）

4.2.3 background-repeat

background-repeat 属性设置是否及如何重复背景图像。默认在水平和垂直方向上重复。

值	描述
repeat	（默认），在水平垂直方向重复
repeat-x	在水平方向重复
repeat-y	在垂直方向重复
no-repeat	不重复
inherit	继承父元素该属性值

4.2.4 background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果！

值	描述
border-box	相对于边框盒来定位
padding-box	（默认），相对于内边距框来定位
content-box	相对于内容框来定位

4.2.5 background-attachment

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

值	描述
scroll	（默认），背景图像会随着页面其余部分的滚动而移动
fixed	当页面的其余部分滚动时，背景图像不会移动
inherit

4.3、background-clip

background-clip 属性规定背景的绘制区域

值	描述
border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框

五、border边界

5.1、border

border是border-width、border-style、border-color三个属性的合并简写

/* 示例 */
border: 1px solid blue;

5.1.1 border-width

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

/* border-width 可以接受4个值，分别表示：上 右 下 左 的边框宽度 */
border-width:thin medium thick 10px;

/* border-width 可以接受3个值，分别表示：上 左右 下 边框的宽度*/
border-width:thin medium thick;

/* border-width 可以接受2个值，分别表示： 上下 左右 的边框宽度 */
border-width: thin medium;

/* border-width 也可以只接受1个值，表示边框四条边的宽度 */
border-width: 2px;

5.1.2 border-style

边框线的类型，可取值如下：

none	hidden	dotted	dashed	solid
无边框	无边框，专门用于表，用于解决边框冲突	点状	虚线	实线
double	groove	ridge	inset	outset
双线	3D 凹槽边框	定义 3D 垄状边框	3D inset 边框	3D outset 边框

border-style同样可以接受4、3、2、1个值，代表的含义与border-width一致

5.1.3 border-color

边框的颜色。可以接受4、3、2、1个值，含义与border-width一致。接受的值包括：颜色名、十六进制代码、rgb代码、transparent（透明）

5.2、border-radius

border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。顺序为：上左、上右、下右、下左。设置圆角率。

利用border属性可以绘制出不同的三角形。更多细节请看【前端练习】

六、渐变

CSS3增加了linear-gradient和radial-gradient两个属性，分别代表「线性渐变」和「径向渐变」。

渐变属性通常情况下，可以作为background-image、background的属性值来使用。但是不可以作为background-color的属性值来用

下面列举了线性、径向渐变的语法，实际效果请看【前端练习】项目

6.1、linear-gradient线性渐变

/* 语法 */
background-image: linear-gradient(direction, color1, color2, ...);
/* direction: 渐变方向，默认从上到下，可选值：to right | to top | to bottom right | ...*/
/* 除了使用top、bottom、left、right这些方向外，还可以使用deg单位直接定义角度, */

/* color：颜色 */

/* 示例 */
background: linear-gradient(red,blue);
background-image: linear-gradient(to bottom right, red, green, blue);
background-image: linear-gradient(-90deg, green, blue);
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));	/* 加入透明度变化 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);	/* 重复的线性渐变，必须带有比例 */

6.2、radial-gradients径向渐变

径向渐变可以指定渐变的中心、形状、大小、颜色组合。

/* 语法 */
background-image: radial-gradient(shape size at position, start-color, ..., last-color);

• 修改渐变形状，可选值：circle（圆）、ellipse（椭圆）
• 修改渐变颜色比例
• 修改渐变中心

background-image: radial-gradient(circle,red,yellow,black);	/* 修改形状 */
background-image: radial-gradient(red 10%,yellow 30%,black 60%);	/* 修改比例 */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);	/* 重复的径向渐变，必须带有比例 */

八、鼠标光标

cursor 属性规定要显示的光标的类型（形状）

值	描述
default	默认光标（通常是一个箭头）
auto	（默认值）浏览器设置的光标
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动
crosshair	光标呈现为十字线
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）

九、阴影

box-shadow用于在元素的框架上添加阴影效果

text-shadow用于为字体添加阴影效果

box-shadow: X轴偏移 | Y轴偏移 | [模糊半径 ]| [扩散半径] | 阴影颜色	/* []表示可选 */
text-shadow: X轴偏移 | Y轴偏移 | 模糊半径 | 颜色

/* 示例：同时设置多个阴影效果 */
box-shadow: 0 -3rem 3rem rgba(0,0,0,0.1),
			0.3rem 0.3rem 1rem rgba(0,0,0,0.3);