CSS border系列 - 爱码网

本文更新版链接

一、border

关于border的3个属性，分别为border-width、border-style、border-color。

其中，border-color默认为元素内容的前景色；border-width默认为关键字medium，但是border-style默认值为none；所以，不指定border-style，边框将不存在。

关于border-color

transparent，据说特定情况下有奇效，需要知道有这样一个可选值。

white，白色的dotted边框，有时候会有奇效。

比如：

CSS border系列

更确切地说，应该是颜色与父元素的背景颜色一样的dotted/dashed边框。

8种border-style：

CSS border系列

（只有记住了，才能在需要的时候合理使用。）

关于mixed border

利用CSS的层叠，我们甚至可以为四个方向上的边框分别设置不同的宽度、样式和颜色，取决于具体情况。

小tips：边框模拟，等高布局

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>边框模拟等高布局</title>
 6         <style>
 7             div.container {
 8                 margin-left: 200px;
 9                 overflow: hidden;
10             }
11 
12             div.box {
13                 width:300px;
14                 float: left;
15                 
16             }
17 
18             div.box1 {
19                 background-color: brown;
20                 border-right: 300px solid green;
21                 margin-right: -300px;
22             }
23 
24             p {
25                 margin-bottom: 50px;
26             }
27 
28         </style>
29     </head>
30     <body>
31         <div class="container">
32             <div class="box box1">
33                 <p>box1</p>
34                 <p>box1</p>
35                 <p>box1</p>
36                 <p>box1</p>
37                 <p>box1</p>
38                 <p>box1</p>
39                 <p>box1</p>
40             </div>
41             <div class="box box2">
42                 <p>box2</p>
43                 <p>box2</p>
44                 <p>box2</p>
45             </div>
46         <div class="container">
47     </body>
48 </html>

View Code