css完成各种各样0.5px的线(小结)

日期:2020-10-30 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

在PC端用1px的边框线,看起来还好,但在手机上端看起来就很不好看了,而0.5px的切分线会有种精美的觉得。用一般写法border:solid 0.5px red;iPhone能够一切正常显示信息,android下基本上全部的访问器都会把0.5鉴别为0,即无垠框情况.

基本原理

基本原理便是给必须加边框的元素插进1个伪类,伪类选用肯定精准定位,随后对伪类加上1px边框,最终开展0.5倍放缩。

transform的放缩和转动默认设置全是依照元素的管理中心点来实际操作的

outline元素在放缩0.5以前规格便是红框元素,放缩后,部位到了红框管理中心,以便使之仍然在左上角,放缩以前大家需开展left:⑸0%;top:⑸0%的位移。

0.5px边框

<div class="first">
  <div class="first-div">
    HELLO WORLD
  </div>
</div>
<style>
.first{
  position: relative;
  font-size: 16px;
}
.first .first-div:before{
  content: "";
  position: absolute;
  top: ⑸0%;
  bottom: ⑸0%;
  left: ⑸0%;
  right: ⑸0%;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: solid 1px red;
  box-sizing:border-box;
}
</style>

不良反应

当用伪类的肯定精准定位来完成了边框后,大家在first类和first-div类上的点一下恶性事件会无效,由于此时的伪类是肯定精准定位,并且长宽等于父类元素的长宽,是摆脱了文本文档流遮盖在父类上的,伪类并不是真正的DOM元素,沒有js点一下恶性事件

处理计划方案

再写1个肯定精准定位元素,遮盖在父元素上,等级优先选择级要高1点

<div class="first">
  <div class="first-div">
    HELLO WORLD
  </div>
  <div class="click-able" onclick="alert('click')"></div>
</div>
<style>
.first{
  position: relative;
  font-size: 16px;
}
.first .first-div:before{
  content: "";
  position: absolute;
  top: ⑸0%;
  bottom: ⑸0%;
  left: ⑸0%;
  right: ⑸0%;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: solid 1px red;
  box-sizing:border-box;
}
.click-able{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
  </style>

0.5px圆角边框

<div class="round">
  <div class="round-div">
    HELLO WORLD
  </div>
</div>
<style>
.round{
   position: relative;
   font-size: 16px;
 }
.round .round-div:before{
  content: "";
  position: absolute;
  top: ⑸0%;
  bottom: ⑸0%;
  left: ⑸0%;
  right: ⑸0%;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  border: solid 1px red;
  border-radius: 22px;
  box-sizing:border-box;
}
</style>

0.5px左侧线

<div class="left">
  <div class="left-div">
    HELLO WORLD
  </div>
</div>
<style>
.left{
  position: relative;
  font-size: 16px;
}
.left .left-div:before{
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid red;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
</style>

0.5px右侧线

<div class="right">
  <div class="right-div">
    HELLO WORLD
  </div>
</div>
<style>
.right{
  position: relative;
  font-size: 16px;
  display: inline-block;
}
.right .right-div:before{
  content: " ";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid red;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
</style>

0.5px底部线

<div class="bottom">
  <div class="bottom-div">
    HELLO WORLD
  </div>
</div>
<style>
.bottom{
  position: relative;
  font-size: 16px;
}
.bottom .bottom-div:before{
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid red;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>

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