应用css3做0.5px的细线的示例编码

日期:2021-03-02 类型:科技新闻 

关键词:公众号小程序,小程序正规价格表,微信群签到小程序,网络抽签小程序,个人做小程序需要什么

Webapp中的CSS3完成 0.5px的细线

觉得很长期没写过blog了,近期日常生活还算平稳,过得较为丰富,因此又要刚开始写写物品了,1个是以便做些纪录,是怕自身某1天,忘掉了,回过头翻翻blog,就会再度的捡起来,记忆力,便是这样。

曾看过淘宝,京东,易迅,1号店这些电子商务的挪动端网站,这些大的电子商务站的相互特性是做的精美,客户体验优良,在其中在合理布局层面 , 0.5px的线看上去就比1px的线看上去要精美许多。

方式1:应用渐变色来做

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 有以下結果:

历经1系列的检测总结,大家能够逻辑推理出下面的渐变色方法:

webkit-linear-gradient 的编码实际效果图以下:

经总结,大家看到-webkit前缀的渐变色方法为:

别的的前缀假如用到,还请小伙子伴们自身来尝试填坑!

表明:

强烈推荐这类写法,这是百度搜索糯米挪动站的做法(假如没改版的话):http://m.nuomi.com/ ,从上述编码的叙述中,能够看到,以便完成盒子顶部边框0.5px的伪编码:border-top:0.5px solid #e0e0e0; 的实际效果,应用after,做为1个钩子,宽度100%,高宽比1px,情况渐变色,1半全透明,1半有色调,这么干是能够的。同理,底部,左侧和右侧的细线,全是同1个道理了。自然,假如必须组成应用,盒子之间的嵌套循环应用,也是能够的,或你有自身的念头(自然做法有许多种!)…

方法2: 应用放缩

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的做法, 并不是很强烈推荐这类做法,由于历经检测,1些手机上端访问器显示信息的并不是太好。这类完成的基本原理是: 在Y轴方位上,缩小1半。就像上面注解的那样。
假如你感觉实际效果不大好,这里有1个 fallback or workaround, whatsoever: 便是上面注解掉的那种做法:能够尝试应用border-top:1px solid #e0e0e0; 替代background-color的做法,京东便是这么做的(假如没改版的话): http://m.jd.com/

方法2的扩展 : 假如要完成4全面是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:⑴;
      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);
 }

表明 :

这是完成1个盒子4周0.5px的做法, 假如添加border-radius圆角实际效果,会发现,一些手机上会有圆角发虚的状况,但是危害并不是很大。假如有两个盒子,上面1个盒子沒有边框实际效果,下面盒子有边框实际效果,两个盒子1样宽,左右在1起的合理布局方法,你会发现,在手机上上有时会对不齐… 错开了0.5px,缘故早已很明了了…也有那个z-index ,能够依据不一样要求来调剂应用,假如能够的话,不应用也是能够的。

方法3: 应用background-image和css3的9宫格裁掉

京东以前是这么做的,如今早已不被应用了。实际做法,请看下面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 的9宫格切法,以下图:

实际相关 border-image 的用法,在网上有许多:

w3c 上的这个讲的并不是很实际:https://www.jb51.net/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的风采反映(这个如今适配性也并不是很好,在1些较低端安卓系统访问器和1些版本号的safari 适用的也并不是很好)。

方法4 (强烈推荐): weui的完成方法 :

这是1款手机微信精英团队开发设计的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);
}

方法5: 应用同附近类似的浅色系,运用视觉效果实际效果,让客户造成幻觉

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

别的表明:并不是很强烈推荐应用渐变色来做 , 在挪动机器设备上能够看到,但在1些访问器上看不见,麻烦于调节。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

 

上一篇:有关css中line 返回下一篇:没有了