border——边框属性

一、第一层次（复合样式）

<style>
    p.one{border:1px solid black;}
    /*边框:1像素 实心的 黑色；*/
</style>

<body>
    <p class="one">边框:1像素 实心的 黑色;</p>
</body>

　　　　运行效果图:

二、第二层次（边框三要素：宽度、样式、颜色）

　　2.1、边框宽度

<style>
    p.one{
        border:1px solid black;
        border-width:10px 20px 30px 40px;
    }
    /*边框宽度:上 右 下 左；*/
</style>

<body>
    <p class="one">边框宽度:上 右 下 左；</p>
</body>

 

　　运行效果图:　　

　　2.2、边框样式

<style>
    p{border-width:10px;}
    p.none {border-style:none;}
    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.hidden {border-style:hidden;}
</style>

<body>
    <p class="none">无边框none</p>
    <p class="dotted">虚线边框dotted</p>
    <p class="dashed">虚线边框dashed</p>
    <p class="solid">实线边框solid</p>
    <p class="double">双边框double</p>
    <p class="groove"> 凹槽边框groove</p>
    <p class="ridge">垄状边框ridge</p>
    <p class="inset">嵌入边框inset</p>
    <p class="outset">外凸边框outset</p>
    <p class="hidden">隐藏边框hidden</p>
</body>

 　　运行效果图：

　　2.3、边框颜色

　　　　支持三种形式：name - 指定颜色的名称，如 "red" ； RGB - 指定 RGB 值, 如 "rgb(255,0,0)"  ；Hex - 指定16进制值, 如 "#ff0000"。

　　　　　　　　　　　另外，也可以设置为"transparent"，与父级颜色一致，可以理解为透明。

<style>
    p{width:400px;border-width:10px;border-style:solid;}
    p.red {border-color:red;}
    p.green {border-color:rgb(0,155,0);}
    p.blue {border-color:#3366FF;}
</style>

<body style="background: #ccc;">
    <p class="red">红色边框</p>
    <p class="green">绿色边框</p>
    <p class="blue">蓝色边框</p>
</body>

　　　　运行效果图：

 

 

　　2.4、边框的宽度|样式|颜色，分别可以设置一至四个值。下面以边框样式为例：

 

三、第三层次（方向）

　　　　

<style>
    p{width:400px;height:200px;}
    
    /*方向复合样式*/
    .one{
        border-top:1px solid #000;
        border-right:2px dotted red;
        border-bottom:3px solid deeppink;
        border-left:4px dashed green;
    }
    /*方向分层样式 可以同样的方式设置*/
    .two{
        border-top-width:1px;
        border-top-style:solid;
        border-top-color:#000;
        border-right-width:2px;
        border-right-style:dotted;
        border-right-color:red;
        border-bottom-width:3px;
        border-bottom-style:solid;
        border-bottom-color:deeppink;
        border-left-width:4px;
        border-left-style:dashed;
        border-left-color:green;
    }
    
</style>

<body>
    <p class="one">方向复合样式</p>
    <p class="two">方向分层样式 可以同样的方式设置</p>
</body>

　　　　运行效果图：

 

四、注意事项

　　在【同一个容器】下四条边框【相邻】且【颜色不一样时】,会出现梯形。

<style>
    div{
        width: 200px;
        height: 70px;
        border-width: 20px;
        border-style: solid;
        border-color: yellow green blue black;
    }    
</style>

　　　　运行效果如图：

 

　　　　利用边框的这一特性，我们可以做出三角形。

<style>
    div{
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 100px;
        border-color: transparent transparent #ccc transparent;
　　　　 border-style: dashed dashed solid dashed;
    }    
</style>

 　　　　运行效果如图：

五、兼容

　　1、边框宽度（border-width）、边框颜色（border-color）、边框方向（border-top|right|bottom|left）以及复合样式|分层样式，全兼容。

　　2、边框样式（border-style）：

　　　　2.1、IE6支持solid、dashed、2px以上的dotted(1px不支持，截图平铺解决)、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。

　　　　2.2、标准浏览器以及IE7以上，支持solid、dashed、dotted、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。

posted @ 2017-03-02 18:26  项雪梅  阅读(1035)  评论(0)  编辑  收藏  举报