边框阴影

让元素更有立体感

  img {
         box-shadow: 2px 10px 5px 20px #ff0000;
         border-radius: 44px;
      }

语法：box-shadow：值1 值2 值3 值4 值5

• 值1：水平阴影的位置
• 值2：垂直阴影的位置
• 值3：模糊距离
• 值4：阴影的尺寸
• 值5：阴影的颜色

border-radius：圆角的半径

复习：text-shadow文本阴影，使文字有阴影效果

语法：text-shadow：值1 值2 值3 值4

• 值1：水平阴影的位置，是必须值，正值时，阴影往右，负值时，阴影往左
• 值2：垂直阴影位置，必须值，正值往下，负值往上
• 值3：阴影向四周扩散的模糊距离（可选）
• 值4：阴影的颜色值，需为合法的颜色值，默认和文字的颜色相同（可选）

轮廓及样式重置

使边框外面再有轮廓
outline：边框宽度 边框颜色 边框样式

在红色的边框外面又加了黑色的边框

   div{
            width: 1024px;
            height: 683px;
            border: 2px solid red;
            border-radius: 10px;
            box-shadow: 3px 3px 10px 50px #ccc;
            outline: 4px solid black;
        }

当input、textarea、select等元素点击之后会出现框，可以使用该属性清除选中之后出现的边框或者轮廓

input, textarea,select{
            outline:none
         }