CSS制作边框效果的技巧总结
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
比如这里最终需求如下:
html代码:
XML/HTML Code复制内容到剪贴板- <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复制内容到剪贴板- .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复制内容到剪贴板- .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解析不同的背景图像(注意是图像)开始区域。来实现,代码如下:
CSS Code复制内容到剪贴板- .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;
- }
下一篇:针对IE6的一些CSS Hack编写时的注意点小结