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页切换案例编码 返回下一篇：没有了