css边框

枕书

于 2021-06-04 20:44:16 发布

阅读量108

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41862216/article/details/117572761

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted

举个小例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
        p.dotted {border-style:dotted}
        p.dashed {border-style:dashed}
        p.solid {border-style:solid}
        p.double {border-style:double}
        p.groove {border-style: groove}
        p.ridge {
            border-style: ridge;}
        p.inset {border-style: outset}
    </style>
</head>
<body>
<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>

<p class="groove">A groove border</p>

<p class="ridge">A ridge border</p>

<p class="inset">An inset border</p>

<p class="outset">An outset border</p>
</body>

</html>

效果图