web前端入门到实战：11种常用css样式之border
2020-04-10 本文已影响0人
大前端世界
边框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）;
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
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>
