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

【问题标题】：Background-image with border-radius in input or textarea在输入或文本区域中具有边框半径的背景图像
【发布时间】：2013-09-22 16:56:54
【问题描述】：

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

【问题讨论】：

-1 在文本区域或输入文本中是不可能的。
是的，不可能将边框半径应用于背景图像，您应该将半径应用于元素并将图片位置设置为“中心中心”，因此图像看起来是圆形的。 :)

标签： html css

【解决方案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

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

【讨论】：

在这个答案的第二个示例中，如果您希望图像是圆形的（不是文本区域），只需将 textarea.ex2 的高度和宽度更改为“140px”即可；
@mj-y 这里的重点是背景图像本身并没有采用圆角。圆角应用于元素，而不是背景。

【解决方案2】：

是的。看看这个-

Border-radius on background-image

点击上面的链接获取完整的详细信息。

【讨论】：