css背景条纹

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; 不会随着圆角的变化而变化*/
    }

条纹背景

水平无渐进条纹

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

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

垂直条纹

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

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

斜向条纹

规定角度为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;
    }

更好的斜向条纹

    .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;
    }

灵活的同色系条纹

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);    
    }

代码下载

感谢

如果感觉对您的学习工作有帮助，请将它分享给需要的人，或者点赞鼓励一下，感谢支持
我还会不断更新。。。