首頁 > web前端 > css教學 > 主體

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

不言
發布: 2018-06-26 11:30:32
原創
1363 人瀏覽過

边框在Web页面的内容块中非常常用,这里为大家整理了CSS制作边框效果的技巧总结,尤其是第三种方案的background-origin利用十分讨巧,需要的朋友可以参考下

比如这里最终需求如下:

2016526115057189.png (330×250)

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;   
}
登入後複製

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

利用SVG和CSS3实现炫酷的边框动画

关于CSS banner图响应式居中显示的方法

兼容ie的内阴影和外阴影的实现效果及测试代码

以上是關於CSS製作邊框效果的一些技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!