css3使用技巧:细线边框的3种不同的写法

2016-10-28 14:17:00 3778 5 编辑:网页前端设计-伍林 来源:H5网页设计书籍

最近在做一个H5手机页面项目遇到了一个小小的问题,就是边框描边1像素的问题。

例:网易

网易app界面

一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办,需求方不愿意不要这么粗,那就只能自己解决了。

1,首先想到的方法是做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px

.line li{  

  background: url('line.png') left top no-repeat;

  background-size: 100% 1px;

  background-position: left bottom;

}

<ul class="line">

  <li></li>

  <li></li>

  <li></li>

</ul>

OK,出来了,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那不是还要在做图片了,好像是有点麻烦哦;


2,所以用上个方法联想到了线性渐变(linear-gradient)

.line li{  border: none;

  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);

  background-image: -moz-linear-gradient(#222 50%,transparent 50%);

  background-image: -o-linear-gradient(#222 50%,transparent 50%);

  background-image: linear-gradient(#222 50%,transparent 50%);

  background-size:  100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;

}

<ul class="line">

  <li>linear-gradient</li>

  <li>linear-gradient</li>

  <li>linear-gradient</li>

</ul>

OK,又出来了,但还是有点瑕疵,那么问题来了,就是改变描边位置(left,top,right,bottom)需要修改参数


如 left描边需要改变:

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);

background-size:  1px 100%;

background-position: left;

都不一一列出了,好像还是有点麻烦哦;


3,所以想到了CSS3阴影(box-shadow),就是用阴影做描边然后用伪类把多余的给遮罩着

.line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}

.line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}

<ul class="line">

  <li>box-shadow</li>

  <li>box-shadow</li>

  <li>box-shadow</li>

</ul>

OK,又出来了,那么问题来了,到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,如果大家有更好的方法可以贴出来大家共同探讨。

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通