Use the HTML on the border (border) of

Set up and down about the same time frame:

  border: width style color ; may be omitted where the color (default black), style can not be omitted

Are provided on the right lower left border (1)

                border-top: width style color ; (top)
                border-right: width style color ; (right)
                border-bottom: width style color ; (lower)
                border-left: width style color ; (left)

Are provided on the right lower left border (2), if omitted, and the left side of the same (right) format, if omitted and the opposite sides (on) the same format, if the right is omitted, the lower, the left, and the same format,

                border-width: left and right lower;
                border-style: right lower left;
                border-Color: right lower left;

Are provided on the right lower left border (3)

                border-top-width:2px ;
                border-top-style: solid;
                border-bottom-color:blue ;

About style: solid (solid line), dotted (broken line)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             .box1{
 8                 width: 200px;
 9                 height: 100px;
10                 border: 3px solid red;
11             }
12             .box2{
13                 width: 200px;
14                 height: 100px;
15                 border-top:   5px solid red;
16                 border-right: 5px solid red;
17                 border-bottom:5px solid red ;
18                 border-left:  5px solid red;
19             }
20             .box3{
21                 width: 200px;
22                 height: 100px;
23                 border-width: 1px 2px 3px 4px;
24                 border-style: solid dotted double solid; 
25                 border-color:  antiquewhite aqua blueviolet chartreuse;    
26             }
27         </style>
28     </head>
29     <body>
30         <div class="box1"> Border Test. 1 </ div > 
31 is          < div class = "BOX2" > Border Test 2 </ div > 
32          < div class = "BOX3" > Border Test. 3 </ div > 
33 is      </ body > 
34 is  </ HTML >

 

Guess you like

Origin www.cnblogs.com/chen-wei123/p/12519414.html