📜  CSS |边框样式属性

📅  最后修改于: 2021-11-07 08:29:34             🧑  作者: Mango

border-style CSS 属性是一个速记属性,用于设置元素边框所有四个边的线条样式。

注意: border-style 属性一次可以取四个值。

语法

border-style: value;

属性值

Value Effect
none No border is created and it is left plain
hidden Just like None it doesnt show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user defined value.
dotted A series of dots are displayed in a line as the border.
solid A single solid and bold line is used as a border.
dashed A series of square dashed lines are used as border.
double Two lines placed parallel to each other act as the border.
groove Displays a 3D grooved border, it’s effect depends on border-color value.
ridge Displays a 3D ridged border, it’s effect depends on border-color value.
inset Displays a 3D inset border, it’s effect depends on border-color value. outset Displays a 3D outset border, it’s effect depends on border-color value.

边框样式:无虚线实线;

  • 上边框无(无边框)
  • 右边框是虚线
  • 底部边框是实心的
  • 左边框是虚线

边框样式:虚线;

  • 上边框和下边框是虚线
  • 右边框和左边框是虚线

边框样式:实心;

  • 所有边框都是实心的

下面的程序说明了边框样式属性:

程序 1:对所有边框仅使用一个值。



  

    Dotted Borders
    

  

    
        

GeeksforGeeks

    
  

输出:

程序 2:为边框使用多个值。



  

    Dotted Borders
    

  

    
        

GeeksforGeeks

    
  

输出:

支持的浏览器: border-style 属性支持的浏览器
下面列出:

  • 铬 1.0
  • 边缘 4.0
  • 火狐 1.0
  • Safari 1.0
  • 歌剧 3.5