HTML: Sub-pixel border

后端 未结 12 983
天涯浪人
天涯浪人 2020-12-11 02:42

Is it possible to have a border that is thinner than 1px and works in IE6+ and is not an image and renders properly visually?

Thank you.

12条回答
  •  攒了一身酷
    2020-12-11 03:19

    Although this isn't (currently) possible in any version of IE or Edge, on the latest versions of Firefox and Chrome you can now use border width values less than 1px.

    .borderTest {
    	box-sizing: border-box;
    	display: block;
    	margin: 0.5em;
    	padding: 0.5em;
    	width: calc( 100% - 1em );
    }
    .borderTest:nth-child(1){
    	border: 1px solid #000
    }
    .borderTest:nth-child(2){
    	border: 0.75px solid #000
    }
    .borderTest:nth-child(3){
    	border: 0.5px solid #000
    }
    .borderTest:nth-child(4){
    	border: 0.25px solid #000
    }
    1px
    0.75px
    0.5px
    0.25px

    This outputs the following on a UHD screen:

提交回复
热议问题