欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS制作邊框效果的技巧總結(jié)

前端開發(fā)者   發(fā)布時間：2016-05-27 09:49:10   作者：佚名   我要評論
邊框在Web頁面的內(nèi)容塊中非常常用,這里為大家整理了CSS制作邊框效果的技巧總結(jié),尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下

比如這里最終需求如下：

2016526115057189.png (330×250)

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="demo">  
  2.     <li>Lady gaga</li>  
  3.     <li>Mariah Carey</li>  
  4.     <li>Adele</li>  
  5.     <li>Avril Lavigne</li>  
  6.     <li>Sarah Brightman</li>  
  7.     <li>Celine Dion</li>  
  8. </ul>  

方案一：

使用偽元素制作一個變寬，并定位在底部。

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .demo li {   
  2.     padding-left: 15px;   
  3.     line-height: 40px;   
  4. }   
  5. .demo li::after {   
  6.     position: absolute;   
  7.     rightright: 0;   
  8.     bottombottom: 0;   
  9.     left: 0;   
  10.     border-bottom: 1px solid #ccc;   
  11.     content: "\0020";   
  12. }   
  13. .demo li:not(:last-child)::after {   
  14.     left: 15px;   
  15. }   
  16. .demo li:hover {   
  17.     background-color: #f3f3f3;   
  18. }  

方案二：

so cool，使用背景圖像（注意是圖像）漸變，代碼瞬間少了許多。(原文用background，我這里改回background-image方便理解)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .demo li {   
  2.     padding-left: 15px;   
  3.     line-height: 40px;   
  4.     background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;   
  5. }   
  6. .demo li:not(:last-child) {   
  7.     background-position: 15px;   
  8. }   
  9. .demo li:hover {   
  10.     background-color: #f3f3f3;   
  11. }  

方案三：

在第三種的基礎(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)容到剪貼板
  1. .demo li {   
  2.     padding-left: 15px;   
  3.     line-height: 40px;   
  4.     background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;   
  5.     background-origin:padding-box;/*background-origin默認(rèn)值，可不寫，我只是為了跟下面對比而已*/  
  6. }   
  7. .demo li:not(:last-child) {   
  8.     background-origin:content-box;   
  9. }   
  10. .demo li:hover {   
  11.     background-color: #f3f3f3;   
  12. }  

相關(guān)文章

  • css background-attachment屬性進階

    前提是定義了background-image屬性，然后用background-attachment來指明背景圖的位置是固定于視口的，還是隨著包含塊移動的。可簡單理解為定義背景圖片隨滾動軸的移動方式
    2017-03-08

  • css 背景固定樣式background-attachment屬性基礎(chǔ)

    這篇文章主要為大家介紹了在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對象滾動還是固定不動,需要的朋友可以參考下
    2017-03-08

  • css background 背景圖的設(shè)置方法

    下面小編就為大家?guī)硪黄猚ss background 背景圖的設(shè)置方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-30

  • CSS background全部匯總

    下面小編就為大家?guī)硪黄狢SS background全部匯總。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-19

  • CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)

    這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下
    2016-06-13

  • 詳解使用CSS固定頁面背景圖片位置的方法

    固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進一步的話自然則是用background-position,下面來詳解使用CSS固定頁面背景圖片及位置的方法:
    2016-05-17

  • 使用CSS3來實現(xiàn)滾動視差效果的教程

    這篇文章主要介紹了使用CSS3來實現(xiàn)滾動視差效果的教程,主要使用到了background-attachment屬性,需要的朋友可以參考下
    2015-08-24

  • css 中background 設(shè)置文本框背景圖 的方法

    這篇文章主要介紹了css 中background 設(shè)置文本框背景圖 的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-07-22

最新評論