轮廓阴影和圆角

轮廓（outline）

outline 用来设置元素的轮廓线，用法和border一样

outline与border的不同点：

轮廓不会影响到可见框的大小，也就不会影响到布局。

---

阴影（box-shadow）

a）box-shadow用来设置元素的阴影效果。

b）阴影不会影响到页面布局

示例：

box-shadow:10px 10px 50px rgba(0,0,0,.3);

第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动

第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动

第三个值：阴影的模糊半径

第四个值：阴影的颜色

---

圆角（border-radius）

border-radius 用来设置圆角，圆角设置的圆的半径大小

注：

四个方向：上左，上右，下左，下右

border-top-left-radius:					`上左`
						
border-top-right-radius:				`上右`

border-bottom-left-radius:				`下左`

border-bottom-right-radius:				`下右`

border-top-left-radius:50px 100px;    `两值分别为x轴与y轴方向上的`

			border-radius可以分别指定四个角的圆角

四个值：		左上	 右上	 右下	左下	`顺时针`

三个值：		左上	  右下和左上		右下

两个值：		右上和坐下		  右上和左下	

一个值：		全一样

border-radius:20px / 40px;  `以斜杠/相隔x轴与y轴的圆角值`

---

设置为圆形

border-radius:50%;