border的属性值 borde-style

 border属性：

border-style的属性值

描述

最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-style</title>
    <style>
        #canvasTEST {
            border: 1px dashed #cccccc;
        }
        div {
            height: 50px;
            border-width: 2px;
            border-color: #dadada;
            margin-bottom: 20px;
        }
        div:nth-child(1) {
            border-style: dotted;
        }
        div:nth-child(2) {
            border-style: dashed;
        }
        div:nth-child(3) {
            border-style: solid;
        }
        div:nth-child(4) {
            border-width: 10px;
            border-style: double;
        }
        div:nth-child(5) {
            border-width: 10px;
            border-style: groove;
        }
        div:nth-child(6) {
            border-width: 10px;
            border-style: ridge;
        }
        div:nth-child(7) {
            border-width: 10px;
            border-style: inset;
        }
        div:nth-child(8) {
            border-width: 10px;
            border-style: outset;
        }
        div:nth-child(9) {
            border-width: 10px;
            border-style: inherit;
        }
        　div:nth-child(10) {
            height: 70px;
            border-width: 10px;
            border-style: solid double groove dotted;
        　}
</style>
</head>
<body>

    <div>(1)dotted:点状边框。在大多数浏览器中呈现为实线。</div>
    <div>(2)dashed:虚线。在大多数浏览器中呈现为实线</div>
    <div>(3)solid:实线。</div>
    <div>(4)double:双线。双线的宽度等于 border-width 的值。</div>
    <div>(5)groove:3D 凹槽边框。其效果取决于 border-color 的值。</div>
    <div>(6)ridge:3D 垄状边框。其效果取决于 border-color 的值。</div>
    <div>(7)inset:3D inset 边框。其效果取决于 border-color 的值。</div>
    <div>(8)outset:3D outset 边框。其效果取决于 border-color 的值。</div>
    <div>(9)inherit:从父元素继承边框样式。</div>
    　<div>border-width: 10px;<br>
        border-style: solid double groove dotted;<br>
        也可以连写border-style属性值，每条边框设置不同的属性值</div>
</body>
</html>

 

posted @ 2020-12-23 13:51  塞巴斯酱  阅读(479)  评论(0)  编辑  收藏  举报