css3画.5个像素的边框

Posted qq_27449993

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3画.5个像素的边框相关的知识,希望对你有一定的参考价值。

画一个带四条边的边框:

方案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;

 

 

以上是关于css3画.5个像素的边框的主要内容,如果未能解决你的问题,请参考以下文章

css3画矩形,矩形里面有多个圆圈,圆圈里面有字,如何实现?

纯CSS3画六角灯笼特效,详细教学

css3实现按钮边框带动画效果

CSS3实现圆角边框除了像素还能怎么弄?

如何用css使边框颜色渐变

html 里怎么画一个矩形