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 可设置重复样式
  • 相关阅读:
    MySql常用日期时间查询
    微信开发中网页授权access_token与基础支持的access_token异同
    Sqlserver复杂查询
    Array排序和List排序
    关于java按位操作运算
    验证redis的快照和AOF
    线程安全 加锁机制
    Redis 与 数据库处理数据的两种模式
    redis实现点击量/浏览量
    jsp网站访问次数统计的几种方法
  • 原文地址:https://www.cnblogs.com/fate-/p/14504418.html
Copyright © 2011-2022 走看看