59_轮廓、阴影和圆角

轮廓

outline用来设置元素的轮廓线，用法和border一模一样，轮廓和边框不同的是，轮廓不会影响到可见框的大小，所以不会影响到页面布局

阴影

box-shadow用来设置元素的阴影效果，阴影由于是影子，所以不会影响页面布局

• 第一个值：水平偏移量，设置阴影的水平位置，正值向右移，负值向左移
• 第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移，负值向上移
• 第三个值：设置阴影的模糊半径
• 第四个值：设置阴影的颜色

示例：box-shadow: 10px 10px 20px rgba(0, 0, 0, .3);

圆角

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

提示：border-radius 属性实际上是以下属性的简写属性：
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

border-radius 属性可以接受一到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）；
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）；
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）；
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）；

将元素设置为一个圆形：
border-radius: 50%;