css3画.5个像素的边框

Posted 2022-11-05 qq_27449993

画一个带四条边的边框：

方案1通过box-shadow，因为boder不支持.5个像素的单位，但是box-shadow支持.5个像素的单位，所以可以通过内阴影来实现

 box-shadow: 0px 0px 0px 0.5px rgba(153, 153, 153, 1);

方案2通过缩放tansform来实现，在这里需要注意需要修改缩放的中心点

在没有设置过transform-origin属性时，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点/中心点）位置进行变形的。而CSS3 中的transform-origin属性用于设置旋转元素的基点位置，熟悉使用transform-origin并结合CSS3动画可以使元素沿着某一基点进行旋转，位移等，本文讲介绍transform-origin的定义和用法并尽可能的分析其原理，文中还将介绍应用到此属性的几个动画效果
 

transform-origin: x-axis y-axis z-axis;

默认值

transform-origin:50% 50% 0;

        利用缩放属性，我们设置一个1px边框，长度和宽度设置为被包裹子元素的两倍，当它缩小0.5的时候，就正好变成了子元素的宽高，1px的边框也缩小了一半变成了0.5px

&::after
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 200%;
    height:200%;
    border: 1px solid rgba(153, 153, 153, 1);
    transform-origin: 0 0;
    transform: scale(0.5);
   

 

 

实现一条边的border

  position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 0.5px;
    background-color: rgba(153, 153, 153, 1) ;
    bottom: 0;