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

1.直接設置border-top:

border-top: 1px solid #eee;

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

1 background-image: url('demo.gif');
2 background-repeat: no-repeat;
3 background-attachment:fixed;
4 background-position: 0% 0%; 
5 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;
}

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

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

總結

以上是生活随笔為你收集整理的CSS画边框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。