CSS制作邊框效果的技巧總結(jié)
前端開發(fā)者 發(fā)布時間:2016-05-27 09:49:10 作者:佚名
我要評論

邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下
比如這里最終需求如下:
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <ul class="demo">
- <li>Lady gaga</li>
- <li>Mariah Carey</li>
- <li>Adele</li>
- <li>Avril Lavigne</li>
- <li>Sarah Brightman</li>
- <li>Celine Dion</li>
- </ul>
方案一:
使用偽元素制作一個變寬,并定位在底部。
CSS代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .demo li {
- padding-left: 15px;
- line-height: 40px;
- }
- .demo li::after {
- position: absolute;
- rightright: 0;
- bottombottom: 0;
- left: 0;
- border-bottom: 1px solid #ccc;
- content: "\0020";
- }
- .demo li:not(:last-child)::after {
- left: 15px;
- }
- .demo li:hover {
- background-color: #f3f3f3;
- }
方案二:
so cool,使用背景圖像(注意是圖像)漸變,代碼瞬間少了許多。(原文用background,我這里改回background-image方便理解)
CSS Code復(fù)制內(nèi)容到剪貼板
- .demo li {
- padding-left: 15px;
- line-height: 40px;
- background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
- }
- .demo li:not(:last-child) {
- background-position: 15px;
- }
- .demo li:hover {
- background-color: #f3f3f3;
- }
方案三:
在第三種的基礎(chǔ)上使用了background-origin
background-origin: border-box | padding-box | content-box
padding-box:從padding區(qū)域(含padding)開始顯示背景圖像。
border-box:從border區(qū)域(含border)開始顯示背景圖像。
content-box:從content區(qū)域開始顯示背景圖像。
所以我們可以利用padding-box和content-box解析不同的背景圖像(注意是圖像)開始區(qū)域。來實現(xiàn),代碼如下:
CSS Code復(fù)制內(nèi)容到剪貼板
- .demo li {
- padding-left: 15px;
- line-height: 40px;
- background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
- background-origin:padding-box;/*background-origin默認值,可不寫,我只是為了跟下面對比而已*/
- }
- .demo li:not(:last-child) {
- background-origin:content-box;
- }
- .demo li:hover {
- background-color: #f3f3f3;
- }
相關(guān)文章
- 前提是定義了background-image屬性,然后用background-attachment來指明背景圖的位置是固定于視口的,還是隨著包含塊移動的??珊唵卫斫鉃槎x背景圖片隨滾動軸的移動方式2017-03-08
css 背景固定樣式background-attachment屬性基礎(chǔ)
這篇文章主要為大家介紹了在CSS中,使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動,需要的朋友可以參考下2017-03-08- 下面小編就為大家?guī)硪黄猚ss background 背景圖的設(shè)置方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-30
- 下面小編就為大家?guī)硪黄狢SS background全部匯總。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-19
CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:2016-05-17
- 這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下2015-08-24
css 中background 設(shè)置文本框背景圖 的方法
這篇文章主要介紹了css 中background 設(shè)置文本框背景圖 的方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-22