CSS3实现0.5px的边框+渐变+伪元素补充

最新推荐文章于 2025-04-11 09:32:51 发布

小五Ivy

最新推荐文章于 2025-04-11 09:32:51 发布

阅读量975

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.youkuaiyun.com/weixin_44471622/article/details/105845908

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

面试的时候被问到如何使用css3实现0.5的边框，当时脑袋蒙圈，想着直接设置border为0.5px，但肯定是不可以的。

思路：

将元素的伪元素高度设为1px,使用css3的渐变（linear-gradient），50%有颜色，50%透明，个人感觉思路没有问题，不知为何页面不展示线条。
伪元素 + scaleY(0.5) 实现边框为0.5px

补充

1. 线性渐变 linear-gradient

linear-gradient指沿着某条直线朝一个方向产生的渐变效果，默认是 to bottom。

  background-image: linear-gradient(方向，起始颜色，终止颜色)；
    方向： to left right top bottom 
    角度： deg
    
    1. 最简单的渐变
    background-image: linear-gradient(red, green);
    
    2. 设定渐变的方向
    background-image: linear-gradient(to right, red, green);
    
    3. 设定渐变的角度
    background-image: linear-gradient(45deg, red, green);
    
    4. 设定渐变的范围
    background-image: linear-gradient(to right, red 20%, green 80%)

2. 径向渐变

radial-gradient指从一个中心点开始沿着四周产生渐变效果，默认中心点为center。

在这里插入图片描述

   background-image: radial-gradeint(渐变范围(半径) at 渐变中心点位置， 起始颜色， 终止颜色 );
    
    1. 最简单的渐变
    background-image: radial-gradient(red, green);

    2. 指定圆的半径和圆心
    background-image: radial-gradient(200px at center, red, green);

    3. 指定椭圆 (横向半径, 纵向半径)
    background-image: radial-gradient(200px 80px at center, red, green);

    4. 指定范围
    background-image: radial-gradient(200px at center, green 50%, red 50%);

2. 伪元素 —> 假的标签

1. 符号： 双冒号（::）
    E::before :在元素子节点的最前面添加一个内容。
    E::after  :在元素子节点的最后面添加一个内容。

2. 伪元素： 用样式模拟出结构的效果
           （用css模拟出html的效果）

注意事项：
    1. 伪元素是原标签的子元素，分别在元素的内部的前后模拟出来两个子标签
    2. 伪元素默认是行内元素，无法设置宽高，需要指定display:block/position:absolute
    3. 伪元素必须有content属性，就算值为空也必须写，可以在content属性中写入文本内容
    4. 伪元素没有语义，一般在网页中用于一些没有语义的修饰效果，可以简化网页结构
    （比如导航栏每个li标签后面有个小箭头，用于下拉，这个小箭头就可以用伪元素来写）

代码实现0.5px的边框

`1. 伪元素+linear-gradient`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实现0.5px的边框1</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .demo-border {
        padding: 20px;
        position: relative;
      }
      .demo-border::after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0px;
        height: 1px;
        width: 100%;
        background: -webkit-linear-gradient(red 50%, transparent 50%);
        /* background: -webkit-linear-gradient(to right, red 50%, transparent 50%); */
      }
    </style>
  </head>

  <body>
    <div class="demo-border"></div>
  </body>
</html>

`2. 伪元素 + scaleY(0.5)`

一条边框宽度0.5px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实现0.5px的边框1</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .demo-border {
        padding: 20px;
        position: relative;
      }
      .demo-border::after {
        position: absolute;
        content: '';
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: red;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
      }
    </style>
  </head>
  <body>
    <div class="demo-border"></div>
  </body>
</html>

4条边框的宽度均为0.5px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .demo-border {
        padding: 20px;
        position: relative;
      }
      .demo-border1 {
        padding: 20px;
        position: relative;
      }
      .demo-border::after {
        position: absolute;
        content: '0.5px';
        left: 0;
        top: 0;
        height: 400px;
        width: 400px;
        border: 1px solid red;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        border-radius: 10px;
      }
      .demo-border1::after {
        position: absolute;
        content: '1px';
        left: 0px;
        top: 200px;
        height: 200px;
        width: 200px;
        border: 1px solid red;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div class="demo-border"></div>
    <div class="demo-border1"></div>
  </body>
</html>