首页 > CSS教程 > CSS 边框
此章节介绍:

    CSS 边框

    CSS 边框属性

    CSS border 属性允许您指定元素边框的样式、宽度和颜色。

    我的所有边都有边框。

    我有一条红色的下边框。

    我有圆角边框。

    我有一条蓝色的左边框。


    CSS 边框样式

    border-style 属性指定要显示的边框类型。

    允许以下值:

    • dotted - 定义点线边框
    • dashed - 定义虚线边框
    • solid - 定义实线边框
    • double - 定义双边框
    • groove - 定义 3D 坡口边框。效果取决于 border-color 值
    • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
    • inset - 定义 3D inset 边框。效果取决于 border-color 值
    • outset - 定义 3D outset 边框。效果取决于 border-color 值
    • none - 定义无边框
    • hidden - 定义隐藏边框

    border-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: inset;}
    p.outset {border-style: outset;}
    p.none {border-style: none;}
    p.hidden {border-style: hidden;}
    p.mix {border-style: dotted dashed solid double;}

    结果:

    点状边框。

    虚线边框。

    实线边框。

    双线边框。

    凹槽边框。其效果取决于 border-color 的值。

    垄状边框。其效果取决于 border-color 的值。

    3D inset 边框。其效果取决于 border-color 的值。

    3D outset 边框。其效果取决于 border-color 的值。

    无边框。

    隐藏边框。

    混合边框。


    注意:除非设置了 border-style 属性,否则其他 CSS 边框属性(将在下一章中详细讲解)都不会有任何作用!