锅炉信息网 > 锅炉知识 > 锅炉百科

CSS实现0.5px

发布时间:

直接设置 border-width: 0.5px;使用方便,但兼容性很差,不推荐使用。用阴影代替边框,设置阴影box-shadow: 0 0 0 .5px #000; 使用方便,

  1. 直接设置 border-width: 0.5px;使用方便,但兼容性很差,不推荐使用。
  2. 用阴影代替边框,设置阴影box-shadow: 0 0 0 .5px #000; 使用方便,能正常展示圆角,兼容性一般。
  3. 给容器设置伪元素,设置绝对定位,高度为1px,背景图为线性渐变,一半有颜色,一半透明。视觉上宽度只有0.5px。这种方法适合设置一条边框,没法展示圆角。
  4. 给容器内设置伪元素,设置绝对定位,宽、高是200%,边框是1px,然后使用transform: scale(0.5) 让伪元素缩小原来的一半,这时候伪元素的边框和容器的边缘重合,视觉上宽度只有0.5px。这种方法兼容性最好,4个边框都能一次性设置,能正常展示圆角,推荐使用

HTML:

<div class="box box0"></div>n<div class="box box1"></div>n<div class="box box2"></div>n<div class="box box3 box3-2 "></div>n<div class="box box3"></div>n<div class="box box4 box4-2"></div>n<div class="box box4"></div>

CSS:

.box {n width: 200px;n height: 50px;n border-radius: 10px;n margin-top: 10px;n}n.box0 {n border: 1px solid #000;n}nn.box1 {n border: 0.5px solid #000;n}nn.box2 {n box-shadow: 0px 0px 0px 0.5px #000;n}nn.box3 {n position: relative;n}n.box3::after {n content: "";n position: absolute;n left: 0;n bottom: 0;n width: 100%;n height: 1px;n background-image: linear-gradient(to bottom, transparent 50%, #000 50%);n}n.box3.box3-2::after {n background-image: linear-gradient(to bottom, #000 50%, #000 50%);n}nn.box4 {n position: relative;n}n.box4::after {n position: absolute;n bottom: 0;n width: 200%;n height: 200%;n content: "";n display: block;n border: 1px solid #000;n border-radius: 10px;n transform: scale(0.5);n transform-origin: left bottom;n}n.box4.box4-2::after {n width: 100%;n height: 100%;n transform: none;n}

精选推荐

  • 711关东煮供应商
    711关东煮供应商

    今天给大家介绍三位,奶粉,全家、罗森这些便利店里关东煮的供应商。店里卖三四块钱一串的关东煮,在网上买不到,一块钱就搞定。首先关东

  • 健康日历|高压锅容易爆炸的4个原因
    健康日历|高压锅容易爆炸的4个原因

    来源:医药养生保健报设计:李雅琴医学审核:姜峰出品人:胡丽丽

  • 高炉
    高炉

    今天这活却是个白事,等到了时辰,那家人便准备火化,本来准备送普炉,我却心中一动,便对那家人说道:“这老人走也不要省,还是送高炉吧。”

  • 高压锅和电压力锅的区别,推荐几款点压力锅
    高压锅和电压力锅的区别,推荐几款点压

    记得之前有一次去朋友家玩,他正在用高压锅煮小米粥,是的,高压锅压小米粥,大概煮了半小时,高压锅突然爆炸了,现场惨不忍睹啊,幸好厨房里没

0