第37天 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
Activity
rocky-191 commentedon May 23, 2019
用border-image是否可以实现
yxkhaha commentedon May 23, 2019
tzjoke commentedon May 28, 2019
我不知道不用border怎么搞,期待楼主公布答案~不过楼上的肯定不对,hr这个标签跨浏览器行为完全不同,就这么一个size属性绝对不行
Konata9 commentedon Sep 16, 2019
能想到的方法就是使用
div
的height
进行模拟。sajiaHLX commentedon Dec 15, 2019
既然是css那么就用css的方法啊!
.box::after{ content: ""; display: block; width: 100px; height: 1px; background-color: black; }
blueRoach commentedon Jul 8, 2020
height: 1px; background-color: red;
qiqingfu commentedon Jul 17, 2020
box-shadow
hou499 commentedon Aug 19, 2020
不太明白标准和怪异模式的区别以及怎样设置,这四条线在各浏览器下都是1px,IE9以下不支持
box-shadow
,IE8以下不支持伪元素,IE5下第二条线是为什么会变成这样子有没有大佬能解下惑...smile-2008 commentedon Oct 26, 2020
an31742 commentedon Nov 23, 2023
.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); / 调整这个值以控制线的粗细 */
}