实现一个比12px更小的字体，设置一个0.5px的边框

最新推荐文章于 2024-05-27 10:09:24 发布

前端碎碎念

最新推荐文章于 2024-05-27 10:09:24 发布

阅读量387

点赞数 9

分类专栏： HTML+CSS的小知识文章标签：前端

本文链接：https://blog.csdn.net/zhongqw_00/article/details/135929266

版权

HTML+CSS的小知识专栏收录该内容

17 篇文章 0 订阅

订阅专栏

10px字体:

scale缩小，transform: scale(0.8)
zoom变焦，zoom: 0.8，非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

0.5px边框:

border + border-image + 线性渐变linear-gradient，从上到下，1px，一般为红色，一般为透明色，造成0.5px的错觉
定位 + 伪元素 + transfrom缩放（scale）

  <style type="text/css">
   .line1 {
     width: 200px;
     margin-top: 10px;
     border-bottom: 1px solid transparent;
     border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0;
   }
   .line2 {
     width: 200px;
     margin-top: 10px;
     position: relative;
   }
   .line2::before {
     content: " ";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     background-image: linear-gradient(to bottom, transparent 50%, red 50%);
   }
   .line3 {
     width: 200px;
     margin-top: 10px;
     position: relative;
   }
   .line3::after {
     content: " ";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     background: red;
     transform: scaleY(0.5);
   }
   .border {
     width: 200px;
     margin-top: 10px;
     position: relative;
   }
   .border::before {
     content: " ";
     position: absolute;
     top: 0;
     left: 0;
     width: 200%;
     height: 200%;
     border: 1px solid red;
     transform-origin: 0 0;
     transform: scale(0.5);
   }
 </style>
</head>
<body>
<div class="line1">line1</div>
<div class="line2">line2</div>
<div class="line3">line3</div>
<div class="border">border</div>
</body>