CSS边框样式使用详细介绍

2021年3月16日16:27:29 发表评论 733 次浏览

CSS边框属性允许我们设置边框的样式, 颜色和宽度

注意:

可以为所有不同的边界设置不同的属性, 即顶部边界, 右侧边界, 底部边界和左侧边界。

CSS边框的属性:

边框样式:

border-style属性指定边框的类型。如果未设置边框样式, 则其他边框属性均无法使用。

以下是边框的类型:

* dotted –定义虚线边框

*虚线–定义虚线边框

* solid –定义实线边框

* double-定义一个双边框

*凹槽–定义3D凹槽边框。

* ridge-定义3D脊状边框。

* inset –定义3D插入边框。

* outset –定义3D起始边框。

*无-定义无边框

* hidden –定义隐藏边框

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p.dotted {
             border-style: dotted;
         }
          
         p.dashed {
             border-style: dashed;
         }
          
         p.solid {
             border-style: solid;
         }
          
         p.double {
             border-style: double;
         }
     </ style >
</ head >
  
< body >
  
     < h2 >The border-style Property</ h2 >
     < p >lsbin</ p >
  
     < p class = "dotted" >A dotted border.</ p >
     < p class = "dashed" >A dashed border.</ p >
     < p class = "solid" >A solid border.</ p >
     < p class = "double" >A double border.</ p >
  
</ body >
  
</ html >

输出如下:

CSS |边框1

边框宽度:

边框宽度设置边框的宽度。边框的宽度可以是px, pt, cm或细, 中, 粗。

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid;
             border-width: 8px;
         }
     </ style >
</ head >
  
< body >
     < p >
         lsbin</ p >
     < p >
         Border properties
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框2

边框颜色:

此属性用于设置边框的颜色。可以使用颜色名称, 十六进制值或RGB值设置颜色。如果未指定颜色, 则border会继承元素本身的颜色。

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid;
             border-color: red
         }
     </ style >
</ head >
  
< body >
     < p >
         lsbin</ p >
     < p >Border properties:color
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框3

边框各边:

各个侧面可以设置为不同的属性。

语法如下:如果border属性具有4个值, 则。

border-style: solid dashed dotted double
Solid: top border
Dashed: right border
Dotted: bottom border
Double: left border

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid dashed dotted double;
             border-color: red;
         }
     </ style >
</ head >
  
< body >
     < p >lsbin</ p >
     < p >
         Border properties:color
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框4

语法如下:如果border属性具有3个值, 则:

border-style: solid dotted double
Solid:top border
Dotted: Left and right border
Double: bottom border

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid dashed dotted;
             border-color: blue;
         }
     </ style >
</ head >
  
< body >
     < p >lsbin</ p >
     < p >
         Border properties:color
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框5

语法如下:如果border属性具有2个值

border-style:solid dotted
Solid:top and bottom border
Dotted: right and left border

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid dashed;
             border-color: blue;
         }
     </ style >
</ head >
  
< body >
     < p >lsbin</ p >
     < p >
         Border properties:color
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框6

语法如下:如果border属性值为1

border-style:dotted
Dotted:top, bottom, left and right border

例子:

<!DOCTYPE html>
< html >
  
< head >
     < style >
         p {
             border-style: solid;
             border-color: green;
         }
     </ style >
</ head >
  
< body >
     < p >lsbin</ p >
     < p >
         Border properties:color
     </ p >
</ body >
  
</ html >

输出如下:

CSS |边框7

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: