純粋な CSS カスタム div の角丸と角丸のエラーをキャッシュするソリューション_html/css

純粋な CSS カスタム div の角丸と角丸のエラーをキャッシュするソリューション_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:28:11

オリジナル

926 人が閲覧しました

　　1、用两张背景重叠制作圆角DIV

IDを背景としてbgとし、背景を右に揃えて左に拡張します。
次に、ID bg_left を持つものを左側にフロートさせ、幅を BG にします。
bg_leftの背景は左の角が右に伸びていますが、bgよりも幅が狭いです。 bgの背景は右の角が左に伸びています。透明にする必要がなければ、もちろん、幅は関係ありません。bg_left ボックスのフロートが右側になるように、方向を逆にすることもできます。

2. 写真を使ってDIVの4方向の角を丸くします

まずDIVを同じ幅で上、中、下の3つの部分に分割します。

上に 3 つの DIV を作成します。左側に丸い左上隅の画像、中央に線、右側に丸い右上隅の画像を使用します。

真ん中は同じままです

以下の製造方法は、丸い角の写真が異なることを除いて、上記と同じです。 S cs

& & & lt;

& lt; css コーナーエフェクト & lt; "content-type " content = " text/html; charset=gb2312 " > < style type = " text/css " > div.RoundedCorner{background: #9BD1FA}

b.rtop, b.rbottom{表示:ブロック ;背景: #FFFFFF}

b.rtop b, b.rbottom b{表示:ブロック;高さ: 1px;オーバーフロー: 非表示; 背景: #9BD1FA}

b.r1{マージン: 0 5px}

b. r2{マージン: 0 3px}
b.r3{マージン: 0 2px}
b.rtop b.r4, b.rbottom b.r4{マージン: 0 1px;高さ: 2px}
< / スタイル>

< ;スクリプト言語= "javascript"＆gt; b> b class='r3'> " ;

" class = " rtop " >< ; / b>
角丸を実現する画像がありません
< b id = " div_bottom " class = " rbottom " >< / b>
< / div>
< ; br >
< / body>

ここの b タグはすべて div タグに置き換えることができます。

しかし、フレームページに角丸を配置すると、角丸がおかしな形になってしまうのですが、長い研究期間を経て、最終的にこの問題を解決する方法を思いつきました。 window.onload イベントのコーナー。コードは次のとおりです。