CSS 境界線のスタイル

CSS ボーダー スタイル

border-style を使用してボーダー スタイルを設定することも、上下左右のスタイルを個別に設定することもできます:

border-top-style

border-left -style

border-right-style

border-bottom-style

一重枠、点線、実線、二重枠など、定義できる枠線スタイルはたくさんあります。そして国境のない国境。

      
  
我没有边框
 
点状边框
 
虚线边框
 
实线边框
 
双线边框
 
3D凹槽边框
 
3D 垄状边框
 
3D inset 边框
 
 3D outset 边框
  

CSSの境界線の幅と色

境界線の幅

境界線の幅はborder-widthで定義され、上下左右の4つのプロパティをそれぞれ設定できます

border-top-width

border-bottom -width

border-left-width

border-right-width

ボーダーの色

ボーダーの幅はborder-colorで定義することもできます。 left と right のプロパティを個別に

border-top-color

border-bottom-color

border-left-color

border-right-color

       
  
我是设置所有边框的
 
我只负责上面
 
我负责下面
 
我设置的是左边
 
我设置的是右边
  

各境界線を個別に設定する

CSS では、異なる側に異なる境界線を指定できます。

インスタンス

p
{
border-top-style: dotted;
border-bottom-style: dotted; ;
border-left -style:solid;
}

上記の例では、単一の属性を設定することもできます:

border-style: dotted sold;

border-style 属性には1-4 の値:

border-style:点線の実線二重破線

上の境界線は点線です

左右の境界線は実線です

下の境界線は二重です

border-style:点線実線;

上下の境界線が点線です

左右の境界線が実線です

border-style: dotted;

四辺すべての境界線が点線です

ボーダーには略語属性もあります

border: 5px Solid red;