Chrome中CSS边界半径渲染中的孔

Question

检查出来：

那怪异还是什么？

这是CSS：

.highlight {
  display: inline-block;
  border-radius: 5px;
  margin: 10px;
  border: 1px solid gray;
}

如何丢失漏洞？

Answer 1

回答你的问题...

是的，这很奇怪但不是那个很奇怪。

在修复方面......

那取决于你在那里的HTML。假设（如我所知）在textarea内有一个带有圆角的div，那么你应该可以使用overflow:hidden来确保剪裁textarea的角落。 EG：

.highlight {
    display: inline-block;
    border-radius: 5px;
    margin: 10px;
    border: 1px solid #333;
    background:white;
    overflow:hidden; /* <- try adding this */
    transform:translateY(100%) scale(3); /* <- nothing to do with the solution - just zooming in so you can see the corner */
}
textarea {
    border: none;
    background:red;
}

<div class="highlight">
    <textarea>
    It not that weird
    </textarea>
</div>