HTML中關於邊框(border)的使用


同時設置上下左右邊框:

  border: 寬度 樣式 顏色;    其中顏色可以省略(默認黑色),樣式不能省略

分別設置上右下左邊框(1)

                border-top: 寬度 樣式 顏色;(頂部)
                border-right:寬度 樣式 顏色 ;(右邊)
                border-bottom:寬度 樣式 顏色 ;(下邊)
                border-left: 寬度 樣式 顏色;(左邊)

分別設置上右下左邊框(2),如果省略左則和對邊(右)格式相同,如果省略下則和對邊(上)格式相同,如果省略右,下,左則和 上 格式相同,

                border-width:上 右 下 左;
                border-style: 上 右 下 左;
                border-color: 上 右 下 左;

分別設置上右下左邊框(3)

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

關於樣式:solid(實線),dotted(虛線)

 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">邊框測試1</div>
31         <div class="box2">邊框測試2</div>
32         <div class="box3">邊框測試3</div>
33     </body>
34 </html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM