html - 入力領域またはテキスト領域に境界線半径のある背景画像

Question

テキストの background-image に border-radius を適用することは可能です<input>か<textarea>?

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要素の角が丸くなっていることがわかりますが、角の丸みは背景画像には影響しません。

デモフィドルを見る

余分な兄弟要素の絶対配置を使用することで回避策は可能ですが、それは質問の範囲外です。

Answer 2

はい。これをチェックしてください-

背景画像のボーダー半径

詳細については、上記のリンクを参照してください。