css背景ストライプ

国境の丸い角

角が丸くなっても輪郭は変わりません。角が丸く
なるとボックスシャドウが変わります。

  .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でスムーズにするトランジションであり、少なくとも2つを指定する必要があります。もちろん、より多くの色を指定して、より複雑なグラデーション効果を作成することもできます。（css3）

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

縦縞

指定された方向は右、または90度です

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

斜めのストライプ

指定された角度は45度、または他の角度です

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

柔軟な色調のストライプ

繰り返し線形グラデーション（）関数は、繰り返し線形グラデーション「画像」を作成するために使用されます

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

コードのダウンロード

感謝

勉強に役立ったと感じたら、必要な人と共有したり、励ましてください。よろしくお願いします
。今後も更新していきます。。。