outline，box-shadow，与圆角

outline轮廓

简述： 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

用法：边框的轮廓线用法和border一摸一样，轮廓不会影响可见框的大小
outline: none 没有轮廓线

box-shadow阴影效果

用于在元素的框架上添加阴影效果
属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

 <style>
      button{ box-shadow: 60px -16px teal; }
        /*/* x偏移量 | y偏移量 | 阴影颜色 */
        button{box-shadow: 10px 5px 5px black;}
      /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
        button{box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);}
      /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    </style>

border-radius使用

仅设置一个值：四个角统一
设置四个方向的值：border-radius采用的是左上角、右上角、右下角、左下角的顺序
设置两个值：采用对角线相等