首页 > > 网页制作 > css >

11种常用css样式之border学习

2020-02-21 16:00:50来源：博客园阅读 ()

11种常用css样式之border学习

边框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             兄弟,好久不见了,挺念叨你的,不知道现在在哪发财,去跟你混了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>