DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS畫邊框和背景
CSS畫邊框和背景
編輯: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;
}

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

 

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved