CSS border-style用法及代码示例

border-style CSS属性是一种简写属性，用于设置元素边框的所有四个边的线型。

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

用法：

border-style:value;

属性值

值	影响
none	没有创建边框，并且将其保留为空白
hidden	就像“无”一样，除非添加背景图像，否则它不会显示任何边框，则border-top-width将被设置为0，与用户定义的值无关。
dotted	一系列点显示在一行中作为边框。
solid	一条实线和粗线用作边框。
dashed	一系列方形虚线用作边框。
double	彼此平行放置的两条线充当边界。
groove	显示3D沟槽边框，其效果取决于border-color值。
ridge	显示3D棱形边框，其效果取决于border-color值。
inset	显示3D嵌入边框，其效果取决于border-color值。
outset	显示3D起始边框，其效果取决于border-color值。

border-style: none dotted solid dashed;

顶部边框为无(无边框)
右边框点缀
底边框是实心的
左边框是虚线

border-style: dotted dashed;

顶部边框和底部边框均点缀
右边框和左边框都是虚线

border-style: solid;

所有边界都是牢固的

以下示例程序旨在说明border-style属性：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Dotted Borders</title> 
    <style> 
        .GFG { 
            border-style:dotted; 
            border-width:6px; 
            background:#009900; 
            padding:30px; 
            text-align:center; 
            width:300px; 
            height:120px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="GFG"> 
        <h2>GeeksforGeeks</h2> 
    </div> 
</body> 
  
</html>

输出：

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Dotted Borders</title> 
    <style> 
        .GFG { 
            border-style:solid double dashed dotted; 
            border-width:6px; 
            background:#009900; 
            padding:30px; 
            text-align:center; 
            width:300px; 
            height:120px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="GFG"> 
        <h2>GeeksforGeeks</h2> 
    </div> 
</body> 
  
</html>

输出：

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

Chrome 1.0
边4.0
Firefox 1.0
Safari 1.0
Opera 3.5

相关用法

注：本文由纯净天空筛选整理自DannanaManoj大神的英文原创作品 CSS | border-style Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。