本文主要介绍如实使用css完成复杂的边框与背景，让你的网站添加色彩

文章目录索引

一、css边框

1.css半透明边框

我们使用rgba,halc方法来实现半透明，设定对象为border
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。HSLA 即色相、饱和度、亮度、透明度。(css3)
rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度(css3)

     /* 半透明边框 */
     .tratnslucentborder{
         width: 300px;
         height: 200px;
         border:10px solid rgba(155, 86, 97, 0.3);//半透明边框
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

2.css多重边框

(1) 1outline 解决方案

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。(css2)
适用于两层边框，样式可以设置成各种样式

     /* outline解决方案 */
     .outlinetwoline{
        width: 300px;
         height: 200px;
         border:10px solid red;
         outline:5px solid black;
         border-radius: 12px;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

(2) box-shaow解决方案

box-shadow 支持逗号分隔语法，可以创建多个实线边框(css3)

    /* 多重边框|box-shadow解决方案 */
     .multipleborder{
         width: 300px;
         height: 200px;
         border:10px solid red;
         box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

3.css边框内圆角

outline不会随着圆角的变化而变化不会随着圆角的变化而变化，
box-shadow会随着圆角的变化而变化

  .borderInnerCircle{
        width: 60%;
        height: 60%;
        background-color: blue;
        background-image: url('./36.png');
        background-repeat: no-repeat;
        background-position:  right 20px bottom 10px;
        border-radius: .8em;
        padding: 1em;
        box-shadow: 0 0 0 .6em #655;
        /* outline: .6em solid #655; 不会随着圆角的变化而变化*/
    }

二、css背景

1.灵活的背景定位

（1）background-position 的扩展语法方案

background-position属性设置背景图像的起始位置。(css1)

    .backgroundposition{
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        background-image: url('./36.png');
        background-repeat: no-repeat;
        background-position:  right 20px bottom 10px;//右下
    }

（2）background-origin 的扩展语法方案

background-Origin属性指定background-position属性应该是相对位置。
如果背景图像background-attachment是"固定"，这个属性没有任何效果

    .backgroundorgin{
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        padding: 10px;
        background: url("./36.png") left 17px bottom;//左下
        background-color: blue;
        background-repeat: no-repeat;
        background-origin: content-box;//相对于content
    }

2.css条纹背景

(1)css水平无渐进条纹

linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。(css3)

   .tiaowen{
        width: 60%;
        height: 60%;
        background: linear-gradient(#788 50%,red 50%);
        /* background-size: 100% 20px; */
     }

(2)css垂直条纹

规定方向为to right,或者90deg

    /* 垂直条纹 */
    .verticalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(to right,#788 15px,red 15px);
        background-size: 30px 100%;
    }

(3)css斜向条纹

规定角度为45deg，或其他角度

    .diagonalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(45deg,#788 25%,red 0,red 50%,#788 0,#788 75%,red 0);
        background-size: 30px 30px;
    }

(4)更好的斜向条纹

    .betterDiagonalStripes{
        width: 60%;
        height: 60%;
        background: linear-gradient(45deg,#788 ,red 30px,#788 30px,red 60px,#788 60px,#788 120px,red 120px,#788 150px);
        background-size: 30px 30px;
    }

(5)灵活的同色系条纹

repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"

    .flexibleStripes {
        width: 60%;
        height: 60%;
        background: #58a;
        background-image: repeating-linear-gradient(30deg,
        hsla(0,0%,100%,.1),
        hsla(0,0%,100%,.1) 15px,
        transparent 0, transparent 30px);    
    }

原文作者：雾灵
原文链接：https://juejin.cn/post/6979003471072591909
本文来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

实现漂亮的CSS条纹背景与边框