アフィリエイト広告を利用しています
<< HTMLメールの一斉配信 | TOP | SQLのCASE文 >>

2017年11月05日

角丸

四角形の４隅を丸くするとき、border-radiusを使う。

４隅に小さな円を置いたと仮定し、その円の半径がborder-radiusの値と理解している。

radius.png

HTML

<div class="box1">
border-radius: 25px;<br>
</div>
<div class="box2">
border-radius: 15px;<br>
</div>
<div class="box3">
border-radius: 5px;<br>
</div>


CSS

.box1 {
width:200px;
margin-top:20px;
padding: 20px 0px 20px 0px;
background-color: #0000Ff;
color:white;
text-align:center;
border-radius: 25px;
}
.box2 {
width:200px;
margin-top:20px;
padding: 20px 0px 20px 0px;
background-color: #ff0000;
color:white;
text-align:center;
border-radius: 15px;
}
.box3 {
width:200px;
margin-top:20px;
padding: 20px 0px 20px 0px;
background-color: #008000;
color:white;
text-align:center;
border-radius: 5px;
}

【このカテゴリーの最新記事】

posted by db-engineer at 00:00 | Comment(0) | HTML、CSS

この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

検索
最新記事
(11/12)XMLHttpRequest：GetとPostの違い
(10/26)uncaught reference error: $ is not defined
(10/08)DB Error: extension not found (53)
(10/01)カレントディレクトリを調べる
(09/02)ファイル名の後の余分な / (スラッシュ)
(05/29)TCPDF: multicellで行間指定
(05/05)Laravel : 登録フォーム（DateとTextarea）
カテゴリーアーカイブ
Access、Excel(53)
Docker(5)
小技(34)
Mysql(64)
Linux(40)
経営(13)
HTML、CSS(34)
日々のこと(102)
Google(12)
PHP(121)
Git(32)
Javascript(17)
PostgreSQL(13)
ブラウザ(19)
ファイルメーカープロ(45)
Mac(33)
システム開発・運用(57)
アフィリエイト(8)
私製 - IT用語辞典(1)
Vue.js(5)
プロフィール
db-engineerさんの画像
db-engineer
プロフィール
タグクラウド