html - 在输入或文本区域中具有边框半径的背景图像

Question

是否可以在文本的背景图像中应用边框半径<input>或<textarea>？

Answer 1

该border-radius属性适用于内联或块级元素。

input因此，您可以在 a和 atextarea元素上创建圆角。

但是，该border-radius属性不会影响与元素关联的任何背景图像。

简短的回答是：不。

为了说明，如果您有以下 HTML：

<textarea class="ex1" name="theText" >Example 1</textarea>

并应用以下 CSS：

textarea.ex1 {
    border-width: 0;
    border-radius: 10px;
    background-color: beige;
    padding: 5px;
    width: 200px;
    height: 200px;
}

textarea.ex2 {
    border-width: 0;
    border-radius: 10px;
    background: lightgray url(http://placekitten.com/150/150) 
                center center no-repeat;
    padding: 5px;
    width: 200px;
    height: 200px;
}

您会看到textarea元素具有圆角，但圆角不会影响背景图像。

见演示小提琴

通过使用额外同级元素的绝对定位可以解决变通方法，但这超出了您的问题范围。

Answer 2

是的。看一下这个-

背景图像上的边框半径

按照上面的链接获取完整的详细信息。