码迷,mamicode.com
首页 > Web开发 > 详细

CSS——边框设置

时间:2019-08-26 20:47:45      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:20px   css   roo   idt   bsp   图片   round   边框   body   

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
        .class1{
        border-style: dotted;    
        height: 20px;
        }
        .class2{
        border-style:dashed dotted;
        height: 20px;    
        }
        .class3{
        border-style: dashed dotted double;     
        height: 20px;
        }
        .class4{
        border-style: dashed  dotted double groove; 
        height: 20px;
        }
        </style>
    </head>

    <body bgcolor="aquamarine">
    <p class=class1></p>
    <p class=class2></p>
    <p class=class3></p>
    <p class=class4></p>
    </body>

</html>

对边框的设置有综合属性:border-style,亦可运用其他四个属性分别对边框的边进行设置。

技术图片

边框宽度设置:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>CSS</title>
        <style type="text/css">
        .class1{
        border-style: dotted;    
        border-width: 2px;
        height: 20px;
        }
        .class2{
        border-style:dashed dotted;
        border-width: 2px 4px;
        height: 20px;    
        }
        .class3{
        border-style: dashed dotted double; 
        border-width: 2px 4px 6px;    
        height: 20px;
        }
        .class4{
        border-style: dashed  dotted double groove; 
        border-width: 2px 4px 6px 8px;
        height: 20px;
        }
        </style>
    </head>

    <body bgcolor="aquamarine">
    <p class=class1></p>
    <p class=class2></p>
    <p class=class3></p>
    <p class=class4></p>
    </body>

</html>

技术图片

 

CSS——边框设置

标签:20px   css   roo   idt   bsp   图片   round   边框   body   

原文地址:https://www.cnblogs.com/zhai1997/p/11414689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!