投稿者:haruki 投稿コメント:0件のコメント 投稿公開日:2019年10月29日 投稿カテゴリー:HTML 投稿の最終変更日:2022年3月31日 この記事の概要元データをトリミングせずに特定のタグの画像だけ角丸にしたい時一括やたくさん指定したい時はCSSファイルにCSS設定の例:画像を角丸CSS設定の例:画像の大きさにかかわらず丸元データをトリミングせずに特定のタグの画像だけ角丸にしたい時 特定の画像の角を丸くしたい時に使うcss「border-radius」で一部だけ角丸にするコードの例文border-collapseの値にcollapseが指定されたtable以外、どれでも指定できるので、画像以外でも背景などを角丸にすることもできます。値の指定方法は、左上から時計回り(左上、右上、右下、左下)で、水平方向の半径/垂直方向の半径という表記で記述します。(一部省略もできます) border-radius:100px 50px 60px 30px/70px 80px 60px 40px;もちろん、emや%で指定もできます。文字だとイメージしずらいので以下の例文と画像を確認してください。 一括やたくさん指定したい時はCSSファイルに 一括で指定したい時はCSSファイルにこのように書いてください img{ border-radius: 1em; } 元画像 指定なし スポンサーリンク CSS設定の例:画像を角丸 <img src=”画像ファイル” style=”border-radius:50px;”/> CSS設定の例:画像の大きさにかかわらず丸 <img src=”画像ファイル” style=”border-radius:50%;” width=”125px” height=”125px”/> この記事をSNS共有する Share this content Opens in a new window Opens in a new window Opens in a new window その他の記事を読む 前の投稿49.HTML5 ウェブワーカーについて 次の投稿HTMLタグ辞典 おすすめ HTML,CSS ウェブカラー配色コード一覧 2019年10月30日 26.HTML レスポンシブWebデザインについて 2019年10月7日 28.HTML エンティティについて 2019年10月7日 6.HTML 見出しについて 2019年10月1日 42.HTML5 スタイルガイドとコーディング規約 2019年10月24日 1.HTMLとは 2019年9月30日 25.HTML レイアウトについて 2019年10月7日 15.HTML 画像について 2019年10月2日 3.HTML 基本的な例とは 2019年9月30日 コメントを残す コメントをキャンセルコメントコメントする名前またはユーザー名を入力してください メールアドレスを入力してコメント Web サイトの URL を入力してください。(任意) 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ