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

Question

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

Answer 1

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

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

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

See Demo Fiddle

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