搜索
简帛阁>技术文章>css 0.5边框线的实现方法

css 0.5边框线的实现方法

1. 下附代码

CSS部分

    .top {<!-- -->position: relative;}
    .border-line::after{<!-- -->
        content:'';
        /* position: absolute; */
        width: 100%;
        height: 1px;
        background-color: #000;
        /* 如果不用 background-color, 使用 border-top:1px solid #979797; 效果是一样的*/
        transform: scaleY(0.5);
    }
     

HTML部分

<div class="top border-line"></div>

实现0.5px边框的办法主要就是用css生成一个伪元素,制定好基本样式后,使用transform:scaleY(0.5),将Y轴缩小至原来的0.5倍来达到一个0.5px的效果。

1下附代码CSS部分top{<!>position:relative;}borderline::after{<!>content:;/*position:absolute;*
gridtext:after{content:;position:absolute;left:0;bottom:0;width:100%;height:1px;backgroundcolor:9797
2019独角兽企业重金招聘Python工程师标准>>>原有元素要添加position:relative;::before伪元素一定要加zindex属性保证原有元素处于后加元素上层,否则会导致原有元素上
在网页制作中,细边框这个制作方法是必不可少。这里介绍2种常见表格细边框制作方法,均通过XHTML验证。复制代码代码如下:<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML
边框05px,可以用以下方式:方式一:border+borderimage+线性渐变lineargradient05像素边框border{width:200px;height:200px;margi
边框05px,可以用以下方式:方式一:border+borderimage+线性渐变lineargradient<div>05像素边框</div><style>
方法1:div嵌套实现多重边框。效果图:html代码XML/HTMLCode复制内容到剪贴板<dividouter><dividinner>div嵌套实现多重边框</d
给border设置渐变色是很常见效果,实现这个效果有很多思路,今天把我所知道方法罗列于此供大家参考。1使用borderimageCSS提供了borderimage属性用于给border绘制复杂图样
给border设置渐变色是很常见效果,实现这个效果有很多思路,今天把我所知道方法罗列于此供大家参考。1使用borderimageCSS提供了borderimage属性用于给border绘制复杂图样
来源|https://segmentfaultcom/a/1190000040794056给border设置渐变色是很常见效果,实现这个效果有很多思路,今天把我所知道方法罗列于此供大家参考。1、使