css多种边框的实现代码展示

  

        多重边框实现方案一：box-shadow
    

    .border-multiple {
        margin: 50px auto;
        padding: 20px;
         
        background-color: #fff; 
        box-shadow: 0 0 0 10px #f0f,
                    0 0 0 15px #00f,
                    0 2px 15px 15px rgba( 0, 0, 0, .8);
    }

  

        多重边框实现方案二：outline
    
    .border-outline {
        margin: 200px auto;
        padding: 20px;
        
        background-color: #ff0;
        outline: 3px dashed #0f0;
        outline-offset: -10px;
    }

  

         需要借助 box-shadow、outline、“多重边框”来实现 
         注意点 ： box-shadow 的扩展半径应该是 圆角半径的 0.5倍
    
 
    .inner-rounding {
        background-color: #ccc;
        margin: 50px auto;
        padding: 20px;
         
        padding: 20px;
        border-radius: 20px;
        box-shadow: 0 0 0 10px #f00;
        outline: 10px solid #f00;
    }

   

         半透明边框的实现
    
    .border-opacity {
        margin: 50px auto;
        padding: 20px;
        
        border: 10px solid hsla(0, 0%, 100%, 0.5);
        background-color: #fff;
        background-clip: padding-box;
    }

   
border-image 的实现原理是九宫格伸缩法：把图片切割成九块，然后把它们应用到元素边框相应的边和角。
        
我们并不想让图片的某个特定部分固定在拐角处；而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。
        .border-image {
            border: 40px solid transparent;
            border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg");
            padding: 1em;
            max-width: 20em;
            font: 130%/1.6 Baskerville, Palatino, serif;
        }
        .border-image:nth-child(2) {
            margin-top: 1em;
            border-image-repeat: round;
        }

 
实现思路：
            1、利用 css 渐变和背景的扩展
            2、在背景图片上，在叠加一层纯白的实色背景
            3、为了让下层的背景透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值
            4、在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果
        
        .contituous-images {
            padding: 1em;
            border: 1em solid transparent;
            /* background: linear-gradient(white, white),
                            url(http://csssecrets.io/images/stone-art.jpg);
            background-size: cover;
            background-clip: padding-box, border-box;
            background-origin: border-box; */

            /* background 还可简写如下 */
            background: linear-gradient(white, white) padding-box,
            url(http://csssecrets.io/images/stone-art.jpg) border-box  0 / cover;

            width: 21em;
            padding: 1em;
            overflow: hidden;
            /* 边框可拖拽 */
            resize: both;
            font: 100%/1.6 Baskerville, Palatino, serif;
        }

还可以通过 渐变图案实现 信封样式的 边框
.envelope-border {
    padding: 1em;
    border: 0.5em solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 3em 3em;
    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;}