2008年2月アーカイブ

背景画像を使用せず、角丸ボックスを実現します。

 .kadomaru_box  { background-color:#fff; width:200px; }
 .kado1 { margin: 0 5px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado2 { margin: 0 3px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado3 { margin: 0 2px;height:1px;overflow: hidden; background-color:#ccc; }
 .kado4 { margin: 0 1px;height:2px;overflow: hidden; background-color:#ccc; }
 .kadomaru_box_contents { padding:10px; background-color:#ccc; width:180px; }

<div class="kadomaru_box">
  <div class="kado1"></div>
  <div class="kado2"></div>
  <div class="kado3"></div>
  <div class="kado4"></div>
</div>
<div class="kadomaru_box_contents">
    <!-- 文章などを記述 -->テキストテキストテキストテキスト
</div>
<div class="kadomaru_box">
  <div class="kado4"></div>
  <div class="kado3"></div>
  <div class="kado2"></div>
  <div class="kado1"></div>
</div>

CSSでオブジェクトを半透明にできます。

div.alphabox{
  width:200px;
  height:100px;
  background:#000;
  filter:alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
}

IE
alpha(opacity=透明度) / 100が100%、25%の場合は25となります。

Firefox・Netscape
-moz-opacity:.透明度 / 1.0が100%、25%の場合は0.25となります。