遊びに満ちる

いいなとおもったものをなんでも配信していってます。

貼り付けた画像の角に丸みをつけてみる

こちらが さきほど もうひとつのブログにアップした角丸なしの画像です

f:id:ericosblog:20200718222059p:plain

 ブログに画像を貼り付けた時点で
<p><img /></p>
というタグが生成され
imgタグ の中に画像の情報が入っています。

実際のソースコード

<p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/ericosblog/20200718/20200718222059.png" alt="f:id:ericosblog:20200718222059p:plain" title="f:id:ericosblog:20200718222059p:plain" class="hatena-fotolife" itemprop="image"  />
</p>


このimgタグの中に 角丸にするための情報を追加します

今回は角に20pxのRをつけてみました
コードは
style="border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;"

border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;"

最初のが一般的なブラウザ用コード
あとの2つが 古いブラウザに対応するためのコードです

最初のコードに角丸情報を追加したのが下記のコードです

<p>
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/e/ericosblog/20200718/20200718222059.png" style="border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;" alt="f:id:ericosblog:20200718222059p:plain" title="f:id:ericosblog:20200718222059p:plain" class="hatena-fotolife" itemprop="image"  />
</p>


で完成がこちらです

f:id:ericosblog:20200718222059p:plain


ブログ全体に反映させることもできますが
その場合は やり方が変わりますので
今回は この画像のみ角丸にするということで書いてみました。

20pxをおっきくしたり ちっさくしたりして
遊んでみてください

こちらが 50%にした場合の画像です
円形になります
画像も正方形のものを使ってくださいね
長方形だと楕円になります
それもまた いいですけどね 笑

f:id:ericosblog:20200614223343j:plain