CSS实现0.5px的边框的两种方式

方式一

<style>

.border {

	width: 200px;

	height: 200px;

	position: relative;

}

.border::before {

  content: "";
  position: absolute;
  left:0;
  top: 0;
  width: 200%;
  height: 200%;
  border: 1px solid blue;
  transform-origin: 0  0;
  transform: scale(0.5);
}
</style>

<div class="border"></div>

方式二

<style>

.border {

	width: 200px;

	height: 200px;

	position: relative;

}

.border::before {

	position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
	top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    border: 1px solid blue;
    transform: scale(0.5);
}
</style>

<div class="border"></div>

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MY0ufldB' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片