唯品秀前端博客
当前位置: 前端开发 > HTML/CSS > css3使用技巧:细线边框的3种不同的写法

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

2016-11-14 分类:HTML/CSS 作者:管理员 阅读(2282)

最近在做一个H5手机页面项目遇到了一个小小的问题,就是边框描边1像素的问题。
例:网易Screenshot_2015-07-30-18-34-53-367_网易新闻

screenshot_2015-07-30-18-34-53-367_%e7%bd%91%e6%98%93%e6%96%b0%e9%97%bb

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

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

1
2
3
4
.line li{
background: url('line.png') left top no-repeat;
background-size: 100% 1px;
background-position: left bottom;}
1
 

OK,出来了,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那不是还要在做图片了,好像是有点麻烦哦;
2,所以用上个方法联想到了线性渐变(linear-gradient)

1
2
3
4
5
6
7
8
.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;}
1
2
3
4
5
<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>

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

如 left描边需要改变:

1
2
3
4
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);
background-size: 1px 100%;
background-position: left;
都不一一列出了,好像还是有点麻烦哦;

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

1
2
3
4
5
6
7
.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,又出来了,那么问题来了,到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,如果大家有更好的方法可以贴出来大家共同探讨

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - css3使用技巧:细线边框的3种不同的写法

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 231 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 847 条
  • 链接总数: 12 个
  • 标签总数: 416 个
  • 建站时间: 980 天
  • 注册用户: 1856 人
  • 访问总量: 8652952 次
  • 最近更新: 2019年8月22日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线