CSS入门 0x6 背景与边框_css .6em-CSDN博客

本文链接：https://blog.csdn.net/funkstill/article/details/88715878

半透明边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>半透明边框</title>
        <style>
            #container {
                width: 474px;
                height: 320px;
                position: relative;
                background-image: url(../images/th.jpg);
            }
            #trans {
                width: 180px;
                height: 60px;
                margin: auto;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0; 

                /*关键代码*/
                border: 10px solid hsla(0,0%,100%, .5);
                background: white;
                background-clip: padding-box;/*如果不设置，边框会被背景色覆盖*/
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="trans">Cellinlab</div>
        </div>
    </body>
</html>

多重边框

box-shadow方案

#shadow {
    background: yellowgreen;
    /*box-shadow 是层层叠加的， 第一层投影位于最顶层，
    依次类推。 因此， 需要按此规律调整扩张半径。 */
    box-shadow: 0 0 0 10px #655,
                0 0 0 15px deeppink,
                0 2px 5px 15px rgba(0, 0, 0, .6);
}

outline方案

#outline {
    background: yellowgreen;
    border: 10px solid #655;
    outline: 5px solid deeppink;
}
#outline-dashed {
    background: yellowgreen;
    border: 10px solid #655;
    outline: 5px dashed deeppink;
}

灵活的背景定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景定位</title>
        <style>
            .container {
                width: 33%;
                height: 320px;
                position: relative;
                background:white;
                float: left;
            }
            .test {
                width: 300px;
                height: 280px;
                margin: auto;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0; 
            }
            /*默认情况下，background-position 是以 padding box 为准的， 
            这样边框才不会遮住背景图片。*/
            #position {
                background: url(../images/V.png) no-repeat #58a;
                background-position: right 20px bottom 10px;
            }
            /*在默认情况下，background-origin的值是padding-box。
            如果把它的值改成 content-box，在 background-position 
            属性中使用的边角关键字将会以内容区的边缘作为基准 */
            #origin {
                padding: 10px;
                background: url(../images/V.png) no-repeat #58a
                            bottom right;
                background-origin: content-box;
            }
            /*在 calc() 函数内部的 - 和 + 运算符的两侧各加一个空白
            符，否则会产生解析错误！*/
            #calc {
                background: url(../images/V.png) no-repeat  #58a;
                background-position: calc(100% - 20px) calc(100% - 10px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="test" id="position">background-position</div>
        </div>
        <div class="container">
            <div class="test" id="origin">background-origin</div>
        </div>
        <div class="container">
            <div class="test" id="calc">calc()</div>
        </div>
    </body>
</html>

边框内圆角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>边框内圆角</title>
        <style>
            .container {
                width: 474px;
                height: 320px;
                position: relative;
                background: greenyellow;
            }
            .test {
                width: 180px;
                height: 60px;
                margin: auto;
                position: absolute;
                top: 0; left: 0; bottom: 0; right: 0; 
            }
            #radius {
               background: tan;
               border-radius: .8em;
               padding: 1em;
               box-shadow: 0 0 0 .6em #655;
               outline: .6em solid #655;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="test" id="radius">Cellinlab</div>
        </div>
    </body>
</html>

条纹背景

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>条纹</title>
        <style>
            .container {
                width: 20%;
                height: 320px;
                float: left;
                background: greenyellow;
            }
            .test {
                width: 280px;
                height:280px;
                margin: auto;
                top: 0; left: 0; bottom: 0; right: 0; 
            }
            /*使用基本垂直线性渐变*/
            #stripe {
                background: linear-gradient(#fb3,#58a);
            }
            /*尝试拉近两个色标*/
            #stripe1 {
                background: linear-gradient(#fb3 50%,#58a 50%);
            }
            /*像对待普通图像一样，调整尺寸，默认会铺满，减少代码量可设置另一个为0*/
            #stripe2 {
                background: linear-gradient(#fb3 50%,#58a 0);
                background-size: 100% 30px;
            }
            /*试试三色条纹*/
            #stripe3 {
                background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);
                background-size: 100% 45px;
            }
            /*垂直条纹*/
            #stripe4 {
                background: linear-gradient(to right,#fb3 50%,#58a 0);
                background-size:30px 100%;
            }
            /*试试斜条纹*/
            #stripe5 {
                background: linear-gradient(45deg,#fb3 50%,#58a 0);
                background-size:30px 30px;
            }
            /*需要调试一下*/
            #stripe6 {
                background: linear-gradient(45deg,
                            #fb3 25%,#58a 0,#58a 50%,
                            #fb3 0,#fb3 75%,#58a 0);
                background-size:30px 30px;
            }
            /*重复线性渐变*/
            #stripe7 {
                background: repeating-linear-gradient(45deg,
                            #fb3,#58a 30px);
            }
            /*更好的斜条纹*/
            #stripe8 {
                background: repeating-linear-gradient(60deg,
                            #fb3,#fb3 15px,#58a 0,#58a 30px);
            }
            /*同色系条纹：不再为每种条纹单独指定颜色， 而是把最深的颜色指定为
            背景色， 同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹：*/
            #stripe9 {
                background: #58a;
                background-image: repeating-linear-gradient(30deg,
                                    hsla(0,0%,100%,.1),
                                    hsla(0,0%,100%,.1) 15px,
                                    transparent 0,transparent 30px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="test" id="stripe">使用基本垂直线性渐变</div>
        </div>
        <div class="container">
            <div class="test" id="stripe1">尝试拉近两个色标</div>
        </div>
        <div class="container">
            <div class="test" id="stripe2">像对待普通图像一样，调整尺寸，默认会铺满，减少代码量可设置另一个为0</div>
        </div>
        <div class="container">
            <div class="test" id="stripe3">试试三色条纹</div>
        </div>
        <div class="container">
            <div class="test" id="stripe4">垂直条纹</div>
        </div>
        <div class="container">
            <div class="test" id="stripe5">试试斜条纹</div>
        </div>
        <div class="container">
            <div class="test" id="stripe6">需要调试一下</div>
        </div>
        <div class="container">
            <div class="test" id="stripe7">重复渐变</div>
        </div>
        <div class="container">
            <div class="test" id="stripe8">更好的斜条纹</div>
        </div>
        <div class="container">
            <div class="test" id="stripe9">同色系条纹</div>
        </div>
    </body>
</html>

复杂的背景图案

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>条纹</title>
        <style>
            .container {
                width: 20%;
                height: 320px;
                float: left;
                background: greenyellow;
            }
            .test {
                width: 280px;
                height:280px;
                margin: auto;
                top: 0; left: 0; bottom: 0; right: 0; 
            }
            /*网格*/
            #image {
                background: white;
                background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
                                linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
                background-size: 30px 30px;
            }
            /*蓝图网格*/
            #image1 {
                background: #58a;
                background-image: 
                    linear-gradient(white 1px,transparent 0),
                    linear-gradient(90deg,white 1px,transparent 0);
                background-size: 30px 30px;
            }
            /*更加逼真的蓝图网格*/
            #image2 {
                background: #58a;
                background-image: 
                    linear-gradient(white 2px,transparent 0),
                    linear-gradient(90deg,white 2px,transparent 0),
                    linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
                    linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
                background-size: 75px 75px,75px 75px,
                                15px 15px,15px 15px;
            }
            /*径向渐变制作波点*/
            #image3 {
                background: #655;
                background-image: radial-gradient(tan 30%,transparent 0);
                background-size: 30px 30px;
            }
            /*背景定位实现复杂波点*/
            #image4 {
                background: #655;
                background-image: radial-gradient(tan 30%,transparent 0),
                                  radial-gradient(tan 30%,transparent 0);
                background-size: 30px 30px;
                background-position: 0 0,15px 15px;
            }
            /*失败的斜条纹*/
            #image5 {
                background: linear-gradient(45deg,#fb3 50%,#58a 0);
                background-size:30px 30px;
            }
            /*提取三角形*/
            #image6 {
                background: #eee;
                background-image: linear-gradient(45deg,#bbb 50%,transparent 0);
                background-size: 30px 30px;
            }
            /*缩小和翻转三角形*/
            #image7 {
                background: #eee;
                background-image:linear-gradient(45deg,transparent 75%,#bbb 0);
                background-size: 30px 30px;
            }
            /*两个三角形拼在一起*/
            #image8 {
                background: #eee;
                background-image: 
                    linear-gradient(45deg,#bbb 25%,transparent 0),
                    linear-gradient(45deg,transparent 75%,#bbb 0);
                background-position: 0 0,15px 15px;
                background-size: 30px 30px;
            }
            /*棋盘*/
            #image9 {
                background: #eee;
                background-image: 
                    linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,
                                        transparent 75%,rgba(0,0,0,.25) 0),
                    linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,
                                       transparent 75%,rgba(0,0,0,.25) 0);
                background-position: 0 0,15px 15px;
                background-size: 30px 30px;
            }
        </style>
    </head>
    <body>
        <div class="container">网格
            <div class="test" id="image"></div>
        </div>
        <div class="container">调整格子大小
            <div class="test" id="image1"></div>
        </div>
        <div class="container">更加逼真的蓝图网格
            <div class="test" id="image2"></div>
        </div>
        <div class="container">径向渐变制作波点
            <div class="test" id="image3"></div>
        </div>
        <div class="container">背景定位实现复杂波点
            <div class="test" id="image4"></div>
        </div>
        <div class="container">失败的斜条纹
            <div class="test" id="image5"></div>
        </div>
        <div class="container">提取三角形
            <div class="test" id="image6"></div>
        </div>
        <div class="container">翻转三角形
            <div class="test" id="image7"></div>
        </div>
        <div class="container">两个三角形拼在一起
            <div class="test" id="image8"></div>
        </div>
        <div class="container">棋盘
            <div class="test" id="image9"></div>
        </div>
    </body>
</html>

伪随机背景和连续边框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪随机背景和连续边框</title>
        <style>
            .container {
                width: 33.3%;
                height: 370px;
                float: left;
                background: white;
            }
            .test {
                width: 280px;
                height:280px;
                margin: auto;
                top: 0; left: 0; bottom: 0; right: 0; 
            }
            /*让他有多种颜色*/
            #image {
                background: linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0 65%,hsl(20,40%,90%) 0);
                background-size: 80px 100px;
            }
            /*拆分然后重复平铺*/
            #image1 {
                background: hsl(20,40%,90%);
                background-image: 
                    linear-gradient(90deg,#fb3 10px,transparent 0),
                    linear-gradient(90deg,#ab4 20px,transparent 0),
                    linear-gradient(90deg,#655 20px,transparent 0);
                background-size: 80px 100%,60px 100%,40px 100%;
            }
            /*使用质数指定宽度，增加随机性*/
            #image2 {
                background: hsl(20,40%,90%);
                background-image: 
                    linear-gradient(90deg,#fb3 1px,transparent 0),
                    linear-gradient(90deg,#ab4 23px,transparent 0),
                    linear-gradient(90deg,#655 41px,transparent 0);
                background-size: 41px 100%,61px 100%,83px 100%;
            }
            /*用图像做边框*/
            #image3 {
                padding: 1em;
                border: 1em solid transparent;
                background: linear-gradient(white,white),url(../images/th.jpg);
                background-size: cover;
                background-clip: padding-box,border-box;
                background-origin: border-box;
            }
            /*渐变图案制作信封*/
            #image4 {
                padding: 1em;
                border: 1em 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 / 5em 5em;
            }
            /*蚂蚁行军效果*/
            @keyframes ants { to { background-position: 100% } }
            #image5 {
                padding: 1em;
                border: 1px solid transparent;
                background:
                    linear-gradient(white, white) padding-box,
                    repeating-linear-gradient(-45deg,
                    black 0, black 25%, white 0, white 50%
                    ) 0 / .6em .6em;
                animation: ants 12s linear infinite;
            }
        </style>
    </head>
    <body>
        <div class="container">让他有多种颜色
            <div class="test" id="image"></div>
        </div>
        <div class="container">拆分然后重复平铺
            <div class="test" id="image1"></div>
        </div>
        <div class="container">使用质数指定宽度，增加随机性
            <div class="test" id="image2"></div>
        </div>
        <div class="container">用图像做边框
            <div class="test" id="image3"></div>
        </div>
        <div class="container">渐变图案制作信封
            <div class="test" id="image4"></div>
        </div>
        <div class="container">蚂蚁行军效果
            <div class="test" id="image5"></div>
        </div>
    </body>
</html>