ボックス装飾

  2. ボックス

外側にボックスシャドウ

・任意タグに
上シャドウ「bsT」
下シャドウ「bsB」
右シャドウ「bsL」
左シャドウ「bsR」
周囲シャドウ「bsA」を設定
・box-shadowは、rgba(0,0,0,0.26)で設定
　任意TAG class="bsT" 　01.bsT
　任意TAG class="bsB" 　02.bsB
　任意TAG class="bsL" 　03.bsL
　任意TAG class="bsR" 　04.bsR
　任意TAG class="bsA" 　05.bsA

code

<div class="bsT"> 01.bsT</div>
<div class="bsB"> 02.bsB</div>
<div class="bsL"> 03.bsL</div>
<div class="bsR"> 04.bsR</div>
<div class="bsA"> 05.bsA</div>

内側にボックスシャドウ

・任意タグに
上シャドウ「bsiT」
下シャドウ「bsiB」
右シャドウ「bsiL」
左シャドウ「bsiR」
周囲シャドウ「bsiA」を設定
・box-shadowは、rgba(0,0,0,0.26)で設定
　任意TAG class="bsiT" 　 01.bsiT
　任意TAG class="bsiB" 　 02.bsiB
　任意TAG class="bsiL" 　 03.bsiL
　任意TAG class="bsiR" 　 04.bsiR
　任意TAG class="bsiA" 　 05.bsiA

code

<div class="bsiT"> 01.bsT</div>
<div class="bsiB"> 02.bsB</div>
<div class="bsiL"> 03.bsL</div>
<div class="bsiR"> 04.bsR</div>
<div class="bsiA"> 05.bsA</div>

角丸ボックス

・任意タグに「rad10」～「rad40」　数字はサイズ
・同じタグに、ボックスシャドウを付加もOK
　任意TAG class="rad10" 　01.rad10
　任意TAG class="rad20" 　02.rad20
　任意TAG class="rad30" 　03.rad30
　任意TAG class="rad40" 　04.rad40

code

<div class="rad10"> 01.rad10</div>
<div class="rad20"> 02.rad20</div>
<div class="rad30"> 03.rad30</div>
<div class="rad40"> 04.rad40</div>
Share
Download
Demo