CSS - > border-bottom没有显示1.5px

时间:2017-04-05 12:34:51

标签: html css

我想显示1.5px的边框,我无法看到。它显示与1px相同。我不想要2 px,bcz对我来说非常广泛



.newTitle {
  border-bottom: 1.5px solid orange;
}

<p class="newTitle">stack Overflow</p>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分:3)

评论变成了答案:

你必须找到一个折衷方案,因为像素不能被分割成碎片,阴影可能会让幻觉变得粗糙:

box-shadow: 0 1px 1px -1px orange

演示

.newTitle {
  border-bottom: 1.5px solid orange;
}

.bis {
  box-shadow: 0 1px 1px -1px orange
}

.ter {
  border-bottom: 2px solid orange;
}
<p class="newTitle">stack Overflow  (1px)</p>
<p class="newTitle bis">stack Overflow (1px + shadow)</p>
<p class="newTitle ter">stack Overflow (2px)</p>

答案 1 :(得分:0)

考虑到像素的定义,这并不让我感到惊讶。 也许增加的阴影感觉比2 px边框更好。

答案 2 :(得分:-1)

您可以在EM中试用。 假设EM是16px,1.5px = 0.09375em 祝你好运!

答案 3 :(得分:-1)

&#13;
&#13;
#percentage {
    width: 200px;
    color: white;
}

#percentage .first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#percentage .second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#percentage .third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

#pixels {
    color: white;
}

#pixels .first {
    width: 50px;
    height: 20px;
    background-color: red;
}

#pixels .second {
    width: 50.5px;
    height: 20px;
    background-color:green;
}

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}
&#13;
<div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>
&#13;
&#13;
&#13;

在浏览器中,值被截断,因此1,1.5都显示相同的宽度。请参考请参考https://stackoverflow.com/a/4309051/5557620