css完成0.5像素的边框的示例编码

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

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

企业的设计方案师在做设计方案图的情况下全是以iphone6(宽为750物理学像素)为标准开展设计方案的。iphone6的机器设备像素比(即css像素与物理学像素的占比)是2,因此设计方案师在设计方案绘画了边框为1px的box的情况下,相对css编码来讲便是0.5像素。

针对这个难题,最直观的方式便是css立即设定边框为0.5px,历经检测,iPhone能够一切正常显示信息,android下基本上全部的访问器都会把0.5鉴别为0,即无垠框情况,因此这类方法行堵塞

CSS3有放缩的特性,大家能够运用这个特性,变小50%的1px的边框,来完成这个作用,实际完成编码以下

<div class="border3">

    <div class="content">伪类设定的边框</div>

</div>  

css:

.border3{

     position: relative;          

 }

 

.border3:before{

       content: '';

       position: absolute;

       width: 200%;

       height: 200%;

       border: 1px solid red;

       -webkit-transform-origin: 0 0;

       -moz-transform-origin: 0 0;

       -ms-transform-origin: 0 0;

       -o-transform-origin: 0 0;

       transform-origin: 0 0;

       -webkit-transform: scale(0.5, 0.5);

       -ms-transform: scale(0.5, 0.5);

       -o-transform: scale(0.5, 0.5);

       transform: scale(0.5, 0.5);

       -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

       box-sizing: border-box;

} 

完成思路:

1、设置总体目标元素的参照部位

2、给总体目标元素加上1个伪元素before或after,并设定肯定精准定位

3、给伪元素加上1px的边框

4、用box-sizing: border-box 特性把边框都包进宽和高里边

5、宽和高设定为 200%

6、全部盒子实体模型变小为0.5

7、调剂盒子实体模型的部位,以左上角为标准 transform-origin: 0 0;

完成結果在iphone显示信息以下:

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

上一篇:CSS完成Tab页切换案例编码 返回下一篇:没有了