边框特效

首先建立一个盒子：

<div class=“box”>

</div>

盒子样式:

.box{
                width: 300px;  
                height: 400px;
                margin: 20px auto;

　　　　box-shadow: 0px 0px 50px #f00 inset;    ———box-shadow表示设置盒子阴影，inset是将外阴影改为内阴影
           }

效果如下：

　box-shadow: 　h-shadow：必须 阴影的水平偏移距离 + 右偏移  - 左偏移
                             v-shadow:必须 阴影的垂直偏移距离 + 下偏移  -上偏移
                             blur: 模糊距离
                             spread：阴影的尺寸
                             color  阴影的颜色
                             inset 将默认的外阴影更改为 内阴影

 

格式：box-shadow: 0px   ————左边阴影

　　　　　　　　　　　　0px    ————头部

　　　　　　　　　　　　　　　　50px  ———整体阴影大小

　　　　　　　　　　　　　　　　　　　　red  ————阴影颜色

　　　　　　　　　　　　　　　　　　　　　　　　inset;  ————内部阴影

 

边框波点：

border：10px ——边框大小

　　　　　　　　dotted——边框为波点　　

　　　　　　　　　　　　red——边框颜色

可设置top、left、right、bottom

边框虚线：

dashed：10px ——边框大小

　　　　　　　dashed——边框为波点　　

　　　　　　　　　　　　red——边框颜色

可设置top、left、right、bottom