2017-04-05 1 views
2

테두리 1.5px를 보여주고 싶습니다. 볼 수 없습니다. 1px와 동일하게 표시됩니다. 나는 2 픽셀을 원하지 않는, BCZ 그것은 나CSS -> border-bottom 1.5px가 보이지 않음

.newTitle { 
 
    border-bottom: 1.5px solid orange; 
 
}
<p class="newTitle">stack Overflow</p>

+7

음, 한 조명 할 수없는 모니터로 * 반 픽셀, 난 당신이 운 ... – domsson

+0

것 같아요 * 이중 테두리 대신 단색 테두리를 사용해보십시오. 색상에 따라 다릅니다. 예를 들어 2px 연한 회색은 2px 빨간색과 같이 이상하게 보일 수 없습니다. – Ravenous

+0

(공평하게 말하면 1px CSS는 반드시 1 물리 픽셀과 동일하지는 않지만 실제로는 충분합니다.) – domsson

답변

-1

당신은 EM에서 그것을 시도 할 수 있습니다 훨씬 광범위한이다. EM이 16px라고 가정하면 1.5px = 0.09375em 행운을 빕니다!

+2

그리고 나서 그의 화면은 여전히 ​​빨강 픽셀로 1 행 또는 2 행으로 표시되어야합니다. – domsson

+0

@mariante가 작동하지 않습니다. –

0

픽셀의 정의를 고려하면 나에게 놀랄 일이 아닙니다. 추가 된 그림자가 2 px 경계보다 나을 수도 있습니다.

당신에게 :

+0

좋습니다! 너무 나쁜 당신은 예제를 포함하지 않았다. 이제 다른 사람이했습니다. – domsson

-1

#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; 
 
}
<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>

값이 잘립니다 브라우저에서

, 그래서 1, 1.5 모두 같은 width..Please이 https://stackoverflow.com/a/4309051/5557620

+0

그 질문의 수용 대답의 예에서 코드를 복사 했습니까? 어쩌면 그 대신 질문을 복제본으로 표시 할 수 있습니다. – domsson

+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>

+0

이것은 아마도 OP가 원하는 것과 가장 비슷합니다. 그것은 내 화면에서 내게 꽤 믿을만한 것 같습니다. – domsson