边框 

border: 1px solid red;

1、边框的粗细：border-width

border-left-width: 10px;
border-right-width: 10px;
border-top-width: 10px;
border-bottom-width: 10px;

2、边框的样式：border-style

border-style: solid;/*实线*/
border-style: dashed;/*虚线*/
border-style: dotted;/*点线*/
border-style: double;/*双线*/
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

3、边框的颜色：border-color

border-color: red;
border-color: rgb(20,20,20);
border-color: #abc21d;

 4、边框运用小技巧

　　例1：制作三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 0px;
            height: 0px;
            border:10px solid white;
            border-top: 10px solid red;
        }
    </style>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    
</body>
</html>

 　　例2：实现一些特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            border-top: 50px solid red;
            border-left: 50px solid green;
            border-right: 50px solid blue;
            border-bottom: 50px solid yellow;
        }
    </style>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    
</body>
</html>

 

　　

posted @ 2017-04-29 14:23  影子疯  阅读(132)  评论(0)    收藏  举报