css3のBorderプロパティの使用例コードの詳細な説明

CSS3 の Border に関連するプロパティは、rounded border-radius、picture border border-image、multi-color border border-color の 3 つです。このうち、rounded border-radius はよく使われるプロパティで、現在多くの Web サイトで円が作成されています。コーナー効果はすべて、border-radius を使用して実現されます。

 /*我们可以分别给各边上色*/
  border-top-color: <color>/*给上边框上色*/
  border-right-color: <color> /*给右边框上色*/
  border-bottom-color:<color> /*给下边框上色*/
  border-left-color: <color> /*给左框上色*/

上記は、要素の境界線に色を付ける方法を示しています。これにより境界線に独自の色が与えられることは誰もが知っています。しかし、境界線に異なる色を追加したい場合、たとえば、境界線にグラデーション カラーや色を追加したい場合、前の方法では何もできません。そのような効果を実現するには、CSS3 で何をすればよいでしょうか?は他のメソッドとして独自の border-color 属性を導入していますが、これまでのところ、この属性をサポートしているのは Firefox 3.0 以降のブラウザのみです。 CSS3 のボーダーカラーの適用が非常に珍しいのもこのためです。私の知る限り、CSS3 のボーダーカラーを使用して特別なボーダー効果を実現しているプロジェクトはありません。しかし、これは私たち CSS3 愛好家が CSS3 のさまざまな特性を学ぼうとする熱意に影響を与えるものではありません。続けて、CSS3 のボーダーカラーがどのように使用されるかを見てみましょう。

その文法の書き方ルールを見てみましょう

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
  -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
  -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
  -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

上記の文法ルールでは、要素の 4 つの側面を別々に記述しますが、CSS3 では border-top-colors を使用する点が 1 つ異なります。 、border-right-colors、border-bottom-colors、border-left-colors、colors は複数ですが、CSS2 ではすべて border-top-color、border-right-color、border-bottom-color、境界線の左の色。誰もがこれを覚えておく必要があります。CSS3 では、それは「色」です

css3 の border-color 属性を使用する場合、境界線の幅が X ピクセルに設定されている場合、境界線に X 色を使用できます。この各色は 1 ピクセルです。 。境界線の幅が 10px に設定されており、3 色または 4 色のみを使用する場合、最後の色がその後ろの幅を埋めます。

.demo {   
    width: 200px;
   height: 100px;
   border: 5px solid transparent;
   -moz-border-top-colors: red blue white white black;
   -moz-border-right-colors: red blue white white black;
   -moz-border-bottom-colors: red blue white white black;
   -moz-border-left-colors: red blue white white black;       
 }

この属性を使用して、グラデーションの境界線効果を作成することもできます

.demo1 {    
      width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

以上がcss3のBorderプロパティの使用例コードの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。