「丸みを帯びた」表示になるようにプロフィール画像を設定しました。これを実現するために、border-radiusを50%に設定しました。
その丸みを帯びた画像に境界線を追加しようとすると(つまりborder:1px black solid;
)、丸みを帯びたパターンには従いませんが、正方形の画像に境界線を追加するだけです。
丸みを帯びた境界線を追加するにはどうすればよいですか?
「丸みを帯びた」表示になるようにプロフィール画像を設定しました。これを実現するために、border-radiusを50%に設定しました。
その丸みを帯びた画像に境界線を追加しようとすると(つまりborder:1px black solid;
)、丸みを帯びたパターンには従いませんが、正方形の画像に境界線を追加するだけです。
丸みを帯びた境界線を追加するにはどうすればよいですか?
境界線と丸みを帯びた角を取得するのと同じ要素に境界線半径を適用する必要があります。
@ben c.taylor:それがハックかどうかはわかりませんが、少なくともテスト済みのChromeで動作します。
たとえば、CSSbackground-image
プロパティを使用して、画像をdiv要素の背景画像として設定します。次に、これに適用border-radius
します。
ただし、ブラウザのプレフィックスを忘れないでください。
画像はborder-radius、html5キャンバス画像もサポートしていません。background-imageのdivで試してみてください。例:
<div style = "background-image:url('profilpic.png'); border-radius:10px; (etc ...) ">
境界線の半径があります