输入或文本区域中带有border-radius的背景图像

Question

是否可以在文字<input>或<textarea>的背景图片中应用border-radius？

Answer 1

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

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

但是，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元素有圆角，但圆角不会影响背景图像。

<强> See Demo Fiddle

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

Answer 2

是。看看这个 -

Border-radius on background-image

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