Skip to content

[css] 第37天 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 #137

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第37天 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样

Activity

rocky-191

rocky-191 commented on May 23, 2019

@rocky-191

用border-image是否可以实现

yxkhaha

yxkhaha commented on May 23, 2019

@yxkhaha
 <div style="width: 100%;height: 1px;"></div>
 <hr size="1">
tzjoke

tzjoke commented on May 28, 2019

@tzjoke

我不知道不用border怎么搞,期待楼主公布答案~不过楼上的肯定不对,hr这个标签跨浏览器行为完全不同,就这么一个size属性绝对不行

Konata9

Konata9 commented on Sep 16, 2019

@Konata9

能想到的方法就是使用 divheight 进行模拟。

.border {
  width: 100%;
  height: 1px;
  background: blue;
}
<div class="border"></div>
sajiaHLX

sajiaHLX commented on Dec 15, 2019

@sajiaHLX

既然是css那么就用css的方法啊!
.box::after{ content: ""; display: block; width: 100px; height: 1px; background-color: black; }

blueRoach

blueRoach commented on Jul 8, 2020

@blueRoach

height: 1px; background-color: red;

qiqingfu

qiqingfu commented on Jul 17, 2020

@qiqingfu

box-shadow

hou499

hou499 commented on Aug 19, 2020

@hou499
.box1 {
    height: 38px;
    width: 100%;
    box-shadow: 0 1px 0 0 #000;
}

.box2 {
    background-color: #000;
    height: 1px;
}

.box3:after{
    content: '';
    display: block;
    height: 1px;
    background-color: #000;
}

hr {
    height: 1px;
    border-width: 0;
    color: #000;
    background-color: #000;
}
<div class="box1">
    <br>
    box-shadow
</div>

<br>
height: 1px;
<div class="box2"></div>

<br>
:after{... height: 1px;}
<div class="box3"></div>

<br>
hr
<hr>

不太明白标准和怪异模式的区别以及怎样设置,这四条线在各浏览器下都是1px,IE9以下不支持box-shadow,IE8以下不支持伪元素,IE5下第二条线是为什么会变成这样子有没有大佬能解下惑...

smile-2008

smile-2008 commented on Oct 26, 2020

@smile-2008

能想到的方法就是使用 divheight 进行模拟。

.border {
  width: 100%;
  height: 1px;
  background: blue;
}
<div class="border"></div>
an31742

an31742 commented on Nov 23, 2023

@an31742

.line {
position: relative;
}

.line::before {
content: "";
position: absolute;
left: 0;
top: 0.5em; /* 调整这个值以控制线的位置 /
width: 100%;
height: 1px;
background-color: black; /
线的颜色 /
transform-origin: 0 0;
transform: scaleY(0.5); /
调整这个值以控制线的粗细 */
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@rocky-191@blueRoach

        Issue actions

          [css] 第37天 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 · Issue #137 · haizlin/fe-interview