實際開發中經常會出現給某個容器畫一個邊框,比如給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; }
這種方式會占用元素的內部空間。不過只是實現一條細線效果還是很好用的。
如果你無意看到,還有其他的方式可以留言告訴我。