ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルのborder属性について詳しく解説

CSSスタイルのborder属性について詳しく解説

高洛峰
高洛峰オリジナル
2017-03-15 10:42:372889ブラウズ

borderの詳細な使用法:

1, border-width property境界線の幅を設定します

可能な値: ピクセル

2, border-styleプロパティは境界線のスタイルを設定します

可能な値: 実線 (直線)、破線 (破線)、点線 (点線)

2、border-color プロパティは境界線の色を設定します

可能な値: red、#f00、#ff0000 , rgb (255,0 ,0),transparent

border-leftプロパティは左の境界線を設定します

border-rightプロパティは右の境界線を設定します

border-topプロパティは上の境界線を設定します

border -bottom プロパティは下枠を設定します

Extension extension

html code

e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

css code

 p {
    height: 20px;
    width: 20px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

result

css code

 p {    
    width: 0px;
    height: 0px;
    border-color: #FF9600 #3366ff #12ad2a #f0ed7a;
    border-style: solid;
    border-width: 20px;
}

result

CSSコード

 p {    
    width: 0px;
    height: 0px;
    border-color: lightblue transparent trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

結果

CSSコード

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent trnasparent pink;
    border-style: solid;
    border-width: 20px;
}

結果

CSSコード

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent gray trnasparent transparent;
    border-style: solid;
    border-width: 20px;
}

結果

CSSコード

 p {    
    width: 0px;
    height: 0px;
    border-color: transparent transparent trnasparent lightgreen;
    border-style: solid;
    border-width: 20px;
}

結果

以上がCSSスタイルのborder属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。