|
邊框border通常簡(jiǎn)寫(xiě)為"border:1px solid red;"但其實(shí)一個(gè)完整的border邊框其實(shí)是由1.border-width/*邊框?qū)挾?/,2.border-style/*邊框樣式*/,3.border-color/*邊框色彩*/三大屬性構(gòu)成構(gòu)成; border邊框方位分為border-top/*邊框上方*/border-bottom/*邊框底部*/border-left/*邊框左邊*/border-right/*邊框右邊*/; 邊框?qū)傩詷邮秸恚篵order-style:none;/*無(wú)邊框*/border-style:hidden;/*隱藏邊框*/border-style:dotted;/*點(diǎn)狀虛線*/border-style:dashed;/*塊狀虛線*/border-style:solid;/*實(shí)線*/border-style:double;/*雙線*/（至于border-style:groove;border-style:ridge;border-style:inset;border-style:outset;效果用到較少，通常solid,dashed,none）; 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>11種常用css樣式之border學(xué)習(xí)</title> 7 <style type="text/css"> 8 /*邊框簡(jiǎn)寫(xiě)*/ 9 .box,.box2{ 10 padding: 10px; 11 border-width: 5px; 12 } 13 .box{ 14 /* border: 5px inset red; */ 15 border-style: inset; 16 border-color: red; 17 } 18 /*邊框樣式*/ 19 .box1{ 20 border-style: none;/*無(wú)邊框*/ 21 border-style:hidden;/*隱藏邊框*/ 22 border-style: dotted;/*點(diǎn)狀虛線*/ 23 border-style: dashed;/*塊狀虛線*/ 24 border-style: solid;/*實(shí)線*/ 25 border-style: double;/*雙線*/ 26 border-style:groove; 27 border-style:ridge; 28 border-style:inset; 29 border-style:outset; 30 border-width: 5px; 31 border-color: #f90; 32 } 33 /*邊框方位*/ 34 .box2{ 35 margin: 10px; 36 border-left: 10px groove cadetblue; 37 border-right: 10px ridge magenta; 38 border-top: 10px inset yellow; 39 border-bottom: 10px outset khaki; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="box"> 45 <div class="box1"> 46 兄弟,好久不見(jiàn)了,挺念叨你的,不知道現(xiàn)在在哪發(fā)財(cái),去跟你混了Brother 47 </div> 48 <div class="box2"> 49 it's been a long time since I missed you. I don't know where I'm getting rich now. 50 </div> 51 </div> 52 </body> 53 </html> |
|
|
來(lái)自： 新進(jìn)小設(shè)計(jì) > 《待分類(lèi)》
