边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成;
border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/;
边框属性样式整理：border-style:none;/*无边框*/border-style:hidden;/*隐藏边框*/border-style:dotted;/*点状虚线*/border-style:dashed;/*块状虚线*/border-style:solid;/*实线*/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学习</title> 7 <style type="text/css"> 8 /*边框简写*/ 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;/*无边框*/21 border-style:hidden;/*隐藏边框*/22 border-style: dotted;/*点状虚线*/23 border-style: dashed;/*块状虚线*/24 border-style: solid;/*实线*/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 兄弟,好久不见了,挺念叨你的,不知道现在在哪发财,去跟你混了Brother47 </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>
联系客服
