フリー素材｜画像を使用しない囲み枠、飾り枠-01

シンプルな囲み枠、飾り枠

色や大きさはお好みで設定してください
s_box01
▼html/css▼
html
<div class="s_box01">
ここに文字
</div>
css
.s_box01{
border:double 3px #000;
box-sizing:border-box;
margin:1em 0;
padding:1em;
width:80%
}
× close
背景色指定サンプル
s_box02
▼html/css▼
html
<div class="s_box02">
ここに文字
</div>
css
.s_box02 {
border:double 5px #000;
box-sizing:border-box;
margin:1em 0;
padding:1em;
width:80%
}
× close
s_box03
▼html/css▼
html
<div class="s_box03">
ここに文字
</div>
css
.s_box03 {
border:dotted 3px #000;
box-sizing:border-box;
margin:1em 0;
padding:1em;
width:80%
}
× close
s_box04
▼html/css▼
html
<div class="s_box04">
<div class="box-inner">
ここに文字
</div>
</div>
css
.s_box04 {
border:dotted 3px #000;
box-sizing:border-box;
margin:1em 0;
padding:5px;
width:80%
}
.box-inner {
border:dotted 3px #ccc;
padding:1em
}
× close
s_box05
▼html/css▼
html
<div class="s_box05">
ここに文字
</div>
css
.s_box05 {
border:dashed 1px #000;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
× close
s_box06
▼html/css▼
html
<div class="s_box06">
ここに文字
</div>
css
.s_box06 {
border:dashed 2px #000;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
× close
s_box07
▼html/css▼
html
<div class="s_box07">
ここに文字
</div>
css
.s_box07 {
border:solid 1px #000;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
css(s_box07b)
.s_box07 {
background:#fff;
border:solid 1px #000;
box-shadow:5px 5px 5px #ccc;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
css(s_box07c)
.s_box07 {
background:#c0c0c0;
border:1px solid #fff;
box-shadow:0 0 0 1px #000;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
css(s_box07d)
.s_box07 {
background:#00c7cc;
border-top:1px solid #fff;
border-right:1px solid #fff;
box-shadow:0 0 0 1px #000;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
css(s_box07e)
.s_box07 {
background:#db869d;
border-top:1px solid #fff;
border-right:1px solid #fff;
box-shadow:0 0 0 1px #000, 2px 2px 0 0 #ccc; /* 縁の太さと色,影の大きさと色 */
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
× close
s_box07b
s_box07c
s_box07d
s_box07e
s_box08
▼html/css▼
html
<div class="s_box08">
ここに文字
</div>
css
.s_box08 {
border:solid 6px #ccc;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
× close
s_box09
▼html/css▼
html
<div class="s_box09">
ここに文字
</div>
css
.s_box09 {
border:1px solid #000;
border-radius:10px;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
css(s_box09b)
.s_box09 {
background:#c0c0c0;
border:1px solid #fff;
box-shadow:0 0 0 1px #000;
box-sizing:border-box;
border-radius:10px;
margin:1em 0;
padding:.5em;
width:80%
}
× close
s_box09b
s_box10
▼html/css▼
html
<div class="s_box10">
ここに文字
</div>
css
.s_box10 {
border:solid 6px #000;
border-radius:10px;
box-sizing:border-box;
margin:1em 0;
padding:.5em;
width:80%
}
× close
▼指定の説明▼
.samplecss {
border:3px double #000; /* 太さ 線の種類 色 */
border-radius:10px; /* 角の丸み */
box-shadow:5px 5px 5px #ccc; /* 影　右 下 ぼかし 色 */
margin:1em 0; /* 枠外の余白 中央寄せは0をautoに変更 */
padding:1em; /* 枠内の余白 */
width:80%; /* 幅 */
background:#fff; /* 背景色を指定する場合は追加 */
}
WEB拍手