边框特效

首先建立一个盒子:

<div class=“box”>

</div>

盒子样式:

.box{
                 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

原文地址:https://www.cnblogs.com/hzqzwl/p/11180405.html