首页 > 其他分享 >用CSS画一条0.5px的线

用CSS画一条0.5px的线

时间:2023-06-20 10:36:48浏览次数:31  
标签:hr px 0.5 transform height 1px CSS

理论上最小的单位是1px

一、最优方法:transforms属性缩放

<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .hr {
            width: 300px;
            background-color: #000;
        }
        .scale-half {
            height: 1px;
            transform: scaleY(0.5); /* 延Y轴缩小1倍 */
            transform-origin: 50% 100%; /* 改变元素变形的原点 */
        }
        .hr.half-px {
            height: 0.5px;
        }
        .hr.one-px {
           height: 1px;
        }
    </style>
</head>
<body>
    <p>1px + scaleY(0.5)</p>
    <div class="hr scale-half"></div>
    <p>0.5px</p>
    <div class="hr half-px"></div>
    <p>1px</p>
    <div class="hr one-px"></div>
</body>
</html>

 

 

参考:(4条消息) 【css】画一条0.5px的直线_css如何画一个0.3px线_a堅強的泡沫的博客-CSDN博客

标签:hr,px,0.5,transform,height,1px,CSS
From: https://www.cnblogs.com/le-cheng/p/17492927.html

相关文章

  • 用CSS画一个三角形
    一、border二、llinear-gradient .triangle{width:160px;height:200px;outline:2pxsolidskyblue;background-repeat:no-repeat;background-image:linear-gradient(32deg,orangered50%,rgba(255,255,255,0)50%),li......
  • css滤镜基本用法
    CSSfilter属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染。它的值可以为filter函数<filter-function>或使用url添加的svg滤镜。filter:<filter-function>[<filter-function>]*|nonefilter:url(file.svg#filter-element-i......
  • Taro项目引入Tailwindcss
    前情TailwindCSS是一个原子类CSS框架,它将基础的CSS全部拆分为原子级别,同时还补全各种浏览器模式前缀,兼容性也不错。它的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类名,然后生成相应的样式代码并写入到一个静态CSS文件中。TailwindCSS快速、......
  • 用 SmartEdit 打开 SAP Commerce Cloud Storefront 时动态在 body 标签注入的 css cla
    当我们使用SAPSmartEdit打开SAPCommerceCloudStorefront时,在商户网站中,还必须在body标签中作为CSS类名包含以下唯一标识符:smartedit-page-uid-:指定指定目录和目录版本的唯一页面标识符。这是为了支持旧版实现而必需的。smartedit-page-uuid-:指定页面的全局唯一标识符(UU......
  • Spartacus 项目中 scss 文件里的 mergeAll 函数
    在SCSS文件中,并没有内置的mergeAll()函数。mergeAll()函数是一个JavaScript/TypeScript中的数组操作方法,用于将多个数组合并为一个数组。它不是SCSS或Sass的特定功能。然而,SCSS和Sass提供了一些强大的功能来处理样式和样式表。这些功能包括嵌套规则、变量、混合......
  • css breakages 的概念介绍
    在前端开发中,CSS(层叠样式表)用于控制网页的样式和布局。如果在CSS代码中存在错误或不当的使用,可能会导致页面显示出不正确的样式或布局,这被称为CSSbreakages(CSS破坏)。CSSbreakages可以有多种形式,例如:语法错误:CSS代码中存在拼写错误、缺少或多余的符号、不正确的选择器或属性等......
  • 【实例】深入详解 CSS 中的 object-fit 5个属性值
    【实例】深入详解CSS中的object-fit5个属性值在本文中,我们将介绍如何使用object-fit,以及一些实际用例和建议。我们并不总是能够为HTML元素加载不同大小的图像,如果我们使用与图像纵横比不成比例的宽度和高度,则图像可能会被压缩或拉伸。为解决此问题,我们可以为img元素使用ob......
  • (七)CSS动画与响应式
    一、CSS动画 二、响应式 ......
  • (一)CSS样式、CSS选择器、伪元素、CSS背景
    一、CSS样式二、CSS选择器 三、伪元素四、背景  ......
  • httpx详解
    https://github.com/projectdiscovery/httpx     Features • Installation • Usage • Runninghttpx • Notes • JoinDiscordhttpx isafastandmulti-purposeHTTPtoolkitthatallowsrunningmultipleprobesusingthe retryablehttp library.......