画像や要素を角丸にして表示させたい

CSSで角丸を一括で指定

border-radius:10px;

バラバラに指定してもいい

border-top-left-radius:5px; /* 左上 */
border-top-right-radius:5px; /* 右上 */
border-bottom-left-radius:20px; /* 右下 */
border-bottom-right-radius:20px; /* 左下 */

各プラウザに対応させるためにベンダープレフィックスを一緒に書く

border-radius: 10px; /* 不特定 */
-webkit-border-radius: 10px; /* Google Chrome、Safari */
-moz-border-radius: 10px; /* Firefox */
-ms-border-radius: 10px; /* Internet Explorer */
-khtml-border-radius: 10px; /* Linux browsers */
-o-border-radius: 10px; /* Opera */

複合させるとこんな感じ

/* 不特定 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
/* Google Chrome、Safari */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
/* Firefox */
-moz-border-top-left-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-bottom-right-radius: 20px;
-moz-border-bottom-left-radius: 20px;
/* Internet Explorer */
-ms-border-top-left-radius: 5px;
-ms-border-top-right-radius: 5px;
-ms-border-bottom-right-radius: 20px;
-ms-border-bottom-left-radius: 20px;
/* Linux browsers */
-khtml-border-top-left-radius: 5px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 20px;
-khtml-border-bottom-left-radius: 20px;
/* Opera */
-o-border-top-left-radius: 5px;
-o-border-top-right-radius: 5px;
-o-border-bottom-right-radius: 20px;
-o-border-bottom-left-radius: 20px;

よくわかんないけど
また違う方法?も?
CSSに記述

.border_radius {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
}

要素に角丸を指定する

HTMLに記述

<div class="border_radius">
表示する内容
</div>

画像に角丸を指定する

HTMLに記述

<img src="./example.jpg" class="border_radius">

以下は私の覚書き

<img src="./no_<?php echo get_post_type(); ?>.jpg" class="border_radius">

参照ページ
CSS3で画像や要素を角丸にして表示する「border-radius」

まだ試していませんが、アイキャッチを丸くする方法です

.attachment-thumb150 {
width: 150px;
border-radius: 150px; /* 不特定 */
-webkit-border-radius: 150px; /* Google Chrome、Safari */
-moz-border-radius: 150px; /* Firefox */
-ms-border-radius: 150px; /* Internet Explorer */
-khtml-border-radius: 150px; /* Linux browsers */
-o-border-radius: 150px; /* Opera */
border: 1px solid #eceae7;
}

参照ページ
Stinger5カスタマイズ】WordPressのアイキャッチ画像を丸く切り抜く

シェアする

フォローする