HTML: Sub-pixel border

后端 未结 12 1020
天涯浪人
天涯浪人 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:15

    Edit: I have overseen then IE6 restriction, but I leave the answer here for others ...

    Its possible with transform:scale(0.5) and put a border element with border:1px; inside. So you get a half pixel border, that (although tricked and browser dependend) is displayed on screen. But I use that trick for printing.

    sure, you have to adapt the content of the element, or play with position

    .outer {
      border:1px solid green;
    }
    
    .halfpix {
      -ms-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -ms-transform:scale(0.5);
      -webkit-transform:scale(0.5);
      transform:scale(0.5);
      width:200px;
      height:100px;
      border:1px solid black;
      }
    zoom browser window if your browser does not display

提交回复
热议问题