CSSで枠線の色のグラデーションコードを実装する方法を詳しく解説-CSSチュートリアル-php.cn

CSSで枠線の色のグラデーションコードを実装する方法を詳しく解説

伊谢尔伦

リリース： 2017-07-19 11:06:19

オリジナル

10822 人が閲覧しました

CSS では、境界線の幅が n ピクセルの場合、n 個の異なる色を設定できます。

コードでは、幅 7px の実線を定義できます: border: 7px Solid #C8C8C8; (ここで設定した色は気にしないでください。後続のコードで新しく設定された色で上書きされます) Firefox の場合)

次のコードに示すように、枠線の 4 つの枠線のグラデーションカラーを同時に設定すると:

<html>  
<head> 
       <style>
        p{
                 height: 100px;
                 width: 100px;
                 border: 7px solid red;
                 border-color: red green yellow black;
             }    
         </style>
</head>
<body>
    <p></p>
</body>
</html>

ログイン後にコピー

HTML ファイルを実行すると、次のような効果が得られます。

コード会議設定した色は、時計回りに自動的に上、右、下、左に割り当てられます。 3 色だけを設定した場合、結果は明らかで、上下 3 方向の境界線に直接割り当てられます。したがって、このルールに従って境界線の色を設定したくないことをコードに知らせるには、各方向の境界線のグラデーション色を個別に設定する必要があります。コードは次のとおりです。

 <html>  
 <head> 
       <style>
                p{
                       height: 100px;
                       width: 100px;
                       background: #E8F5FC;
                       border: 7px solid red;
                      -moz-border-top-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-right-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-bottom-colors: #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                      -moz-border-left-colors:  #FDFDFD #F9F9F9  #F4F4F4 #ECECEC #E2E2E2 #D6D6D6 #C8C8C8;
                   }
      </style>
</head>
    <body>
            <p></p>
    </body>
</html>

ログイン後にコピー

実行結果は次のとおりです。