css的边框border

css边框的设置

1、border-style

设置边框显示样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p{
                border: 10px;
            }
            p.none{
                border-style: none;
            }
            p.solid{
                border-style: solid;
            }
            p.dashed{
                border-style: dashed;
            }
            p.dotted{
                border-style: dotted;
            }
            p.double{
                border-style: double;
            }
            p.groove{
                border-style: groove;
            }
            p.ridge{
                border-style: ridge;
            }
            p.inset{
                border-style: inset;
            }
            p.outset{
                border-style: outset;
            }
            p.hidden{
                border-style: hidden;
            }
        </style>
    </head>
    <body>
        <P class="none">没有边框</P>
        <P class="solid"> 实线边框</P>
        <P class="dashed">虚线边框</P>
        <P class="dotted">圆点边框</P>
        <P class="double">双线边框</P>
        <P class="groove">3D 槽线边框</P>
        <P class="ridge">3D 脊线边框</P>
        <P class="inset">3D 内凹边框</P>
        <P class="outset">3D 外凸边框</P>
        <P class="hidden">隐藏边框</P>
    </body>
</html>

2、border-width

设置边框宽度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p{
                border-style: dotted;
                border- 30px;
            }
        </style>
    </head>
    <body>
        <P>没有边框</P>
    </body>
</html>

3、border-color

修改边框颜色

4、要先设置边框样式，也就是border-style，再设置其他属性，否则是不会生效的。

5、边框样式也可以简写，直接用border

6、通过border-top、border-left、border-right、border-bottem来为每一条边框设置样式。

7、定义圆角边框

左上角：border-top-left-radius

右上角：border-top-right-radius

左下角：border-bottom-left-radius

右下角：border-bottom-right-radius

统一设置：border-radius

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            p.a{
                border-style: solid;
                border-top-left-radius: 15px 15px;
            }
            p.b{
                border-style:solid;
                border-radius:15px / 15px;
            }
        </style>
    </head>
    <body>
        <P class="a">没有边框</P>
        <p class="b">这里这里</p>
    </body>
</html>

8、图像边框

border-image

border-image-slice 可切割图像
border-image-repeat 可设置重复样式