DIV CSS 佈局教程網

實際開發中經常會出現給某個容器畫一個邊框，比如給div畫一個上邊框這樣.這裡就以給div畫上邊框為例。要給div畫上邊框有幾種實現方式。

1.直接設置border-top: 

border-top: 1px solid #eee;

2.背景圖片的方式的方式

 background-image: url('demo.gif');
 background-repeat: no-repeat;
 background-attachment:fixed;
 background-position: 0% 0%; 
 background-size:100% 1px;

上面的css表示，給div設置一個背景圖片，只顯示長度100%，但是高度1px。這個也可以顯示出來一條線。

3.給div裡面再放一個元素，hr，div, span都行，給這個元素設置樣式

#target hr{
    width: 100%;
    height: 1px;
    border: 0;
    background-color: #222;
}


<div id="target">
    <hr />
</div>
     

4.使用偽類元素實現

#target:before{
    content: " ";
    background-color: #222;
    width: 100%;
    height: 3px;
    display: block;
}

這種方式會占用元素的內部空間。不過只是實現一條細線效果還是很好用的。

如果你無意看到，還有其他的方式可以留言告訴我。