パソコンQ&A

背景画像を使わないスタイルシートだけの丸角領域

marginとheightを巧みに使って、ピクセル画のように丸角を作ります。

[参考記事]テーブルで丸角

画像を使わない丸角

このスペースは画像を使わずにスタイルシートだけで丸角になっています。

[ソース]

<div style="margin: 0 10%;background: #999;">
<b style="display:block;background: #fff;">
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
</b>
<h3>画像を使わない丸角</h3>
<p>このスペースは画像を使わずにスタイルシートだけで丸角になっています。</p>
<b style="display:block;background: #fff;">
<b style="margin: 0 1px;display:block;height: 2px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 2px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 3px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
<b style="margin: 0 5px;display:block;height: 1px;overflow: hidden;background: #999;"></b>
</b>
</div>


Nifty Cornersと呼ばれる手法で、中身のないインライン要素<b>が10個も使われているためW3C仕様としてはあまりよくない。

下はグラデーションにしてみた場合です。

画像を使わない丸角

このスペースは画像を使わずにスタイルシートだけで丸角になっています。

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net