zoukankan      html  css  js  c++  java
  • 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

    1. border-image-slice 可切割图像
    2. border-image-repeat 可设置重复样式
  • 相关阅读:
    MongoDB插入时间不正确的问题
    json 字符串转换成对象,对象转换成json字符串
    sqlServer sa用户登陆失败的解决办法
    基于web工作流开发
    javascript ajax的语法
    收藏和设为首页的方法
    asp.net收藏和设为首页的代码
    设计模式
    设计模式
    设计模式
  • 原文地址:https://www.cnblogs.com/fate-/p/14504418.html
Copyright © 2011-2022 走看看