使用css3做0.5px的细线的示例代码


Posted in HTML / CSS onJanuary 18, 2018

Webapp中的CSS3实现 0.5px的细线

感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了,回头翻翻博客,就会再次的拾起来,记忆,就是这样。

曾看过淘宝,京东,易迅,一号店等等电商的移动端网站,这些大的电商站的共同特点是做的精致,用户体验良好,其中在布局方面 , 0.5px的线看上去就比1px的线看上去要精致很多。

方法一:使用渐变来做

html代码:

<div></div>

css代码:

.bd-t{
  position:relative;
}

.bd-t::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(0deg, transparent 50%, #e0e0e0 50%);
}

Be careful ! 注意此处有坑!!!:

对于不同浏览器的兼容,我们需要使用不同的前缀如:

-webkit-linear-gradient
-ms-linear-gradient 
-o-linear-gradient

坑就在这些前缀里: 我们把代码里的height 1px 变成 100px , 参数同为 0deg, transparent 50%, #e0e0e0 50% 并使用最新版的chrome来测试 。

linear-gradient 有如下结果:

使用css3做0.5px的细线的示例代码

经过一系列的测试总结,我们可以推理出下面的渐变方式:

使用css3做0.5px的细线的示例代码

webkit-linear-gradient 的代码效果图如下:

使用css3做0.5px的细线的示例代码

经总结,我们看到-webkit前缀的渐变方式为:

使用css3做0.5px的细线的示例代码

其他的前缀如果用到,还请小伙伴们自己来尝试填坑!

说明:

推荐这种写法,这是百度糯米移动站的做法(如果没改版的话):http://m.nuomi.com/ ,从上述代码的描述中,可以看到,为了实现盒子顶部边框0.5px的伪代码:border-top:0.5px solid #e0e0e0; 的效果,使用after,作为一个钩子,宽度100%,高度1px,背景渐变,一半透明,一半有颜色,这么干是可以的。同理,底部,左边和右边的细线,都是同一个道理了。当然,如果需要组合使用,盒子之间的嵌套使用,也是可以的,或者你有自己的想法(当然做法有很多种!)…

方式二: 使用缩放

html代码:

<div></div>

css代码:

.bd-t{
  position:relative;
}

.bd-t:after{
  content: "  ";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #e0e0e0;
  /* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */
  -webkit-transform: scaleY(.5);
  transform:scaleY(.5);
}

说明

这是实现盒子上边框0.5px的做法, 不是很推荐这种做法,因为经过测试,一些手机端浏览器显示的不是太好。这种实现的原理是: 在Y轴方向上,压缩一半。就像上面注释的那样。
如果你觉得效果不太好,这里有一个 fallback or workaround, whatsoever: 就是上面注释掉的那种做法:可以尝试使用border-top:1px solid #e0e0e0; 代替background-color的做法,京东就是这么做的(如果没改版的话): http://m.jd.com/

方式二的拓展 : 如果要实现四周全是0.5px的线条的话 :

html代码:

<div class='bd-all'></div>

css代码:

.bd-all{
      position:relative;
  }

 .bd-all:after{
      content: "  ";
      position: absolute;
      left: 0;
      top: 0;
      z-index:-1;
      width: 200%;
      height:200%;
      border:1px solid #e0e0e0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5, .5);
      transform: scale(.5, .5);
 }

说明 :

这是实现一个盒子四周0.5px的做法, 如果加入border-radius圆角效果,会发现,有些手机会有圆角发虚的情况,不过影响不是很大。如果有两个盒子,上面一个盒子没有边框效果,下面盒子有边框效果,两个盒子一样宽,上下在一起的布局方式,你会发现,在手机上有时候会对不齐… 错开了0.5px,原因已经很明了了…还有那个z-index ,可以根据不同需求来调整使用,如果可以的话,不使用也是可以的。

方式三: 使用background-image和css3的九宫格裁减

京东之前是这么做的,现在已经不被使用了。具体做法,请看下面demo结构:

├─demo/ ························ demo 目录
        └─┬─ test.html  ··············· test.html 文件
        └─── pic.png ·················· png 图片文件

在test.html 中 有如下关键代码:

html 结构:

<div class="bd-t"></div>

css 结构:

.bd-t{
   position: relative;
}
.bd-t::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 1px solid transparent;
/* 下面用 stretch 和 round 都可以 */
border-image: url('pic.png') 2 1 1 1 stretch; 
-webkit-border-image: url('pic.png') 2 1 1 1 stretch;
}

而 pic.png 的九宫格切法,如下图:

使用css3做0.5px的细线的示例代码

具体有关 border-image 的用法,网上有很多:

w3c 上的这个讲的不是很具体:https://3water.com/w3school/cssref/pr_border-image.htm

在 MDN 上 有明确的介绍,并且有很多配图,包括兼容性等等:https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

但是不推荐这种写法,毕竟图片质量比较大,能用代码解决的,不用图片。在这里border-width 是 1px , 但是 背景是有2px的距离,所以在1px的border-top上,显示出有颜色的高度就是0.5px, 同理,底边,左边和右边的0.5px,也都很容易实现。 这个就是css3的魅力体现(这个现在兼容性也不是很好,在一些较低端的安卓浏览器和一些版本的safari 支持的也不是很好)。

方式四 (推荐): weui的实现方式 :

这是一款微信团队开发的UI 组件 详情见: weui , 它的使用方式是这样的:

 

.weui-cell:before{
   content: " ";
   position: absolute;
   left: 0;
   top: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #D9D9D9;
   color: #D9D9D9;
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
}

方式五: 使用同周边相似的浅色,利用视觉效果,让用户产生错觉

这个就考验设计师的功力了 :)

其他说明:不是很推荐使用渐变来做 , 在移动设备上可以看到,但在一些浏览器上看不到,不便于调试。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

 

HTML / CSS 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
AmazeUI 单选框和多选框的实现示例
Aug 18 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 #HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 #HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 #HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 #HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 #HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
You might like
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
jQuery中queue()方法用法实例
2014/12/29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
西安交大自主招生自荐信
2014/01/27 职场文书
岗位聘任书范文
2014/03/29 职场文书
医院党员公开承诺书
2014/08/30 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
暂住证证明
2015/06/19 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python