PR

特定のimgタグや背景をStyle指定して角丸にする

スポンサーリンク
スポンサーリンク

元データをトリミングせずに特定のタグの画像だけ角丸にしたい時

特定の画像の角を丸くしたい時に使う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”/>
記事が参考になった方、サイト運営を応援してくれる方へ

下のリンクから楽天トラベルでホテル予約か、楽天市場で商品購入を願いします。応援よろしくお願いします。
リンクを表示すれば楽天トラベルで予約の検索ができます。

リンクを表示すれば、お好きな商品が検索できます。

スポンサーリンク
haruki

ITエンジニア × 副業 × 投資家
副業と投資で年間100万円以上の収益を達成
ブログ・YouTube・投資で複数の収益源を確立

私は、IT業界でクラウドエンジニアとして10年以上の経験を積みながら、副業と投資を実践し、資産を増やしてきました。
このブログでは、 「最短で副業、本業の収益を上げ、資産を最大化する方法」 をリアルな成功事例と失敗談を交えて解説します。

Youneedjp.com の目的

「個人が副業と投資で安定収益を得るための実践ガイド」 を提供

副業・投資・お得なライフハックを 「すぐに実践できるノウハウ」 に特化し、
読者が 「月5万円の副収入」 を最短で得られるようにサポートします。

harukiをフォローする

クラウドファンディングで資金を集めています。運営を応援してくださる方は下のリンクの欲しいものリストからプレゼントお願いします。もちろん、住所、氏名などは匿名で発送できます。

参考になたっらSNSシェア&フォローもよろしくお願いします!質問、お仕事相談など、「X」のDMで気軽にご相談ください。

スポンサーリンク
スポンサーリンク
スポンサーリンク
HTML
スポンサーリンク
参考になった情報は、ぜひシェアお願いします
harukiをフォローする

コメント

タイトルとURLをコピーしました