關於CSS製作邊框效果的一些技巧

邊框在Web頁面的內容塊中非常常用,這裡為大家整理了CSS製作邊框效果的技巧總結,尤其是第三種方案的background-origin利用十分討巧,需要的朋友可以參考下

比如這裡最終需求如下：

html代碼：

<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代碼：

.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方便理解)

.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;   }

方案三：

在第三種的基礎上使用了background-origin

background-origin: border-box | padding-box | content-box

padding-box：從padding地區（含padding）開始顯示背景映像。

border-box：從border地區（含border）開始顯示背景映像。

content-box：從content地區開始顯示背景映像。

所以我們可以利用padding-box和content-box解析不同的背景映像（注意是映像）開始地區。來實現，代碼如下：

.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;   }

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！