網頁多邊框效果:CSS3中的box

來源:互聯網
上載者:User

文章簡介:大家常見的應該是雙線邊框效果,使用頁面部分元素具有層次的效果。在CSS2中依靠的是背景圖片或者藉助相鄰兩個元素的border來實現。而現在CSS3中的box-shadow可以直接在一個元素中完成.

多邊框效果,大家常見的應該是雙線邊框效果,使用頁面部分元素具有層次的效果。在CSS2中依靠的是背景圖片或者藉助相鄰兩個元素的border來實現。而現在CSS3中的box-shadow可以直接在一個元素中完成,我們來看一個簡單的片段:

<!-- HTML -->
 <div id="box"></div>
  <!-- CSS -- > body {   background: #39275B; } 
#box {   
width: 100px;   
height: 100px;   
margin: 50px auto;  
border: 1px solid #1E1530;   
box-shadow:-1px 0 0px #4E3A73,1px 0 0 #4e3a73,0 1px 0 #4e3a73,0 -1px 0 #4e3a73; } 

效果如下:

製作這種效果方法還有很多,同時box-shadow製作多邊框的運用與還有其他的,我們再來看一個

#box {     
width: 200px;     
height: 150px;     
margin: 50px auto;     
box-shadow:     
0 0 0 2px #000,     
0 0 0 3px #999,     
0 0 0 9px #fa0,     
0 0 0 10px #666,    
 0 0 0 16px #fd0,     
0 0 0 18px #000; } 

上面完全是通過box-shadow製作了一個六色邊框效果的案例:

使用這種方法是不是很方便呀,這僅是box-shadow實現多邊框的方法,我們還可以使用別的CSS3屬性來實現,比如說border-color、::before等,我們將在近期整理有關於製作多邊框效果的各種方法,感興趣的同學可以觀注本站的相關更新。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。