电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

css3做到0.5px的细线实例社交

2020-10-27 18:28:52 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要参考了用于css3想到0.5px的细线的示例代码的具体资料,小编明白挺不错的,现在互动给大家,也给大家认真个详见。一起跟从小编过来是不是吧

Webapp中的CSS3解决问题 0.5px的细线

感觉很长时间没写过博客了,最近生活还只差平衡,过得较为用心,所以又要开始写写东西了,一个是为了动手些记录,是就让自己某一天,记起了,上来翻翻博客,就亦会再次的拾起来,记忆,就是这样。

曾说道淘宝,京东,易迅,一号店等等电商的移动故又称网站,这些大的电商站的共同特点是认真的气派,用户体验较好,其中在布局方面 , 0.5px的线看来就比1px的线看起来要优雅很多。

方法一:可用交替来要用

html代码:


<p></p>

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 有如下结果:

经过一系列的测试总结,我们可以侦探小说不止下面的可视方式:

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

经总结,我们看见-webkit词根的过渡方式为:

其他的单词如果比如说,还叮嘱小伙伴们自己来尝试填坑!

暗示:

延揽这种发音,这是百度糯米移动终点站的不应(如果不曾复刻的话):http://m.nuomi.com/ ,从上述代码的说明了中,可以看着,为了借助于盒子顶部边框0.5px的伪代码:border-top:0.5px solid #e0e0e0; 的效果,运用于after,作为一个钩子,宽度100%,高度1px,背景见下文,一半透明,一半有颜色,这么天和是可以的。同理,底部,左边和右边的细线,都是同一个道理了。当然,如果无需重新组合用于,盒子之间的嵌套采用,也是可以的,或者你有自己的设想(当然不合理有很多种!)…

方式二: 用于图层

html代码:


<p></p>

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代码:


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

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 结构:


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

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 的九宫格切法,如下图:

完全一致有关 border-image 的用法,网上有很多:

w3c 上的这个说的不是很完全一致:http://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的魅力说明了(这个现在兼容性也不是很好,在一些较低端的安卓浏览器和一些版本的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);}

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

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

其他陈述:不是很提拔常用渐进来好好 , 在移动设备上可以碰到,但在一些浏览器上看得,不便于调试。

无关破例:

css3借助冲击波效果

css3绘制一个圆圆的loading转圈动画实例互动

CSS3中transform功能

以上就是css3想到0.5px的细线实例互动的详述内容,更多代为注意php中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152