CSSでborder-radius以外の丸い枠を作る方法を共有する

CSS3のborder-radius属性を使うと非常に簡単に丸い枠を作ることができますが、ブラウザの互換性の問題で対処が難しくなります

。 CSS3 border-radius
は、p+CSS を使用して丸い境界線を生成することが多く、現在、p+CSS の丸い境界線の 1 つは CSS3 を使用し、もう 1 つはレイアウトを使用して角丸をシミュレートします。
まず最初の CSS3 について話しましょう。前提として、ブラウザが CSS3 をサポートしている必要があります。Firefox3 は CSS3 を使用して直接生成された角が丸くなっています。IE ではまだ正しい角が表示されます。つまり、先に進んで頑固になってください。

CSS3を使用すると、四隅を丸く指定したり、特定の角を丸く指定したりすることができ、とても便利です。 コードは次のとおりです。 ;h1>round コーナーボーダー

部分的に丸いコーナー

ボーダーなしで実装radius 角丸

CSS3 では、border-radius 属性を使用して角丸長方形を簡単に設定できますが、この属性は、ブラウザの古いバージョンで適応的な幅と高さの角丸を実現するためにサポートされていません。 、以下の3つの方法が利用可能です。

1. 背景画像を使用して角を丸くします

背景画像を使用して、幅と高さを調整できる角の丸い長方形を作成します。まず、4 つの角の丸い画像を切り取ってから、4 つの角の丸い四角形を配置する必要があります。長方形の 4 辺に画像を配置します。これで、合計 5 つの p タグ、1 つのコンテナ p と 4 つの丸い背景 p が必要になります。それは分かりやすいですか？

具体的な実装に関しては、いくつかの詳細に注意する必要があります。長方形のコンテナーの場合:

上部と下部のパディングのサイズは、少なくとも丸い角の高さに設定されます。

位置は相対位置に設定されます。

コンテンツを配置します。

4つの角丸背景の場合:

各角丸背景画像を個別に設定します。
コンテナの長方形の四隅に絶対に配置されます。
背景画像を表示するには、幅と高さの値を設定する必要があります。
丸みを帯びた画像の幅と高さが 5px であると仮定します。具体的なコードは次のとおりです:

#round {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius: 10px;     
    -webkit-border-radius: 10px;     
    color:#fff;     
}     

#indie {     
    background-color: #000;     
    border: 1px solid #000;     
    -moz-border-radius-topright: 10px;     
    -moz-border-radius-bottomright: 10px;     
    -webkit-border-top-left-radius: 10px;     
    -webkit-border-bottom-left-radius: 10px;     
    color:#fff;     
}

<p class="content">
    <p class="top-left"></p>
    <p class="top-right"></p>
    <p class="btm-left"></p>
 <p class="btm-right"></p>
</p>

2. 丸みを帯びた長方形を作成するための純粋な CSS+p

このメソッドの原理は次のとおりです。ピクセル ポイントを使用して円弧を描画します。わかりやすくするために、ここでは角の半径が 3px の例を使用します。角丸長方形の背景色はピンク、長方形の境界線は黒です。下の図に示すように、左上隅の丸い角が拡大されます。

ここでは、長方形の上下の辺に高さ 1px の 3 ps が必要で、角の丸い部分をシミュレートするために一緒に垂直方向に配置されます。具体的な実装は次のとおりです。

最初の p は、上の図の四角形の上の黒い境界線です。シミュレートされた角の半径は 3 ピクセルであるため、p の左右のマージンは 3 ピクセルに設定され、背景色が設定されます。黒に設定されています。 2番目のpの左右の余白を2px、左右の境界線を1pxの黒い線、背景色をピンクに設定します。

3番目のpの左右の余白を1px、左右の境界線を1pxの黒い線、背景色をピンクに設定します。

角丸長方形の下の2つの角丸は、上記の3つのpを逆順に並べたものです。

長方形のコンテンツエリアのpは、左右の境界線と背景色を設定するだけです。

具体的なコードは次のとおりです

.content {   
 position: relative;   
 padding: 5px;   
}   
.top-left,   
.top-rightright,   
.btm-left,   
.btm-rightright {   
 position: absolute;   
 width: 5px;   
 height: 5px;   
}   
.top-left {   
 top: 0;   
 left: 0;   
 background: url(imgs/top-left.png) no-repeat top left;   
}   
.top-rightright {   
 top: 0;   
 rightright: 0;   
 background: url(imgs/top-rightright.png) no-repeat top left;   
}   
.btm-left {   
 bottombottom: 0;   
 left: 0;   
 background: url(imgs/btm-left.png) no-repeat top left;   
}   
.btm-rightright {   
 bottombottom: 0;   
 rightright: 0;   
 background: url(imgs/btm-rightright.png) no-repeat top left;   
}

<p class="wrapper">
    <p class="r1"></p>
 <p class="r2"></p>
 <p class="r3"></p>
 <p class="content">aaaaa</p>
 <p class="r3"></p>
 <p class="r2"></p>
 <p class="r1"></p>
</p>

この方法の長所と短所の分析:

背景画像を使用しないため、HTTPリクエストの数が削減されます。

事後のメンテナンスは良いのですが、角丸長方形の画素が増えると意味のないpコードが指数関数的に増えてしまいます。

実装された角丸長方形には制限があります。

単色の丸い角のみを実現できます。

3. CSSのボーダーを使用して台形を描画し、角丸をシミュレートします

ボーダー属性を設定すると、以下のような効果が得られます。

比較的大きな幅を設定した場合。上の図の最初のパターンに示すように、p 値の 4 つの境界線を使用すると、4 つの台形を取得できます

これに基づいて、p の高さの値を 0 に設定すると、次のように台形と二等辺三角形を取得できます。上の図の 2 番目のパターン
p の幅と高さを 0 に設定し、上と左の境界線のみを設定すると、2 つの直角三角形が得られます。写真; これを元に、いずれかの枠線の色を透明に設定すると、4番目のパターンのような直角三角形が得られます。

コードは次のとおりです:

.r1 {   
 height: 1px;   
 margin: 0 3px;   
 background-color: #111;   
}   
.r2 {   
 height: 1px;   
 margin: 0 2px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.r3 {   
 height: 1px;   
 margin: 0 1px;   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}   
.content {   
 background-color: #f4b4b4;   
 border-left: 1px solid #111;   
 border-right: 1px solid #111;   
}

<p class="box1"></p>
<p class="box2"></p>
<p class="box3"></p>
<p class="box4"></p>

已经知道了如何通过 border 画出梯形了，那又该如何利用梯形模拟圆角矩形呢？很简单，只要在矩形的上面和下面各放上一个梯形，就能得到圆角矩形了。原理嘛就是利用梯形的左右两个斜边模拟圆角啦，直接上效果图：

具体代码如下：

<p class="wrapper">
    <p class="top"></p>
 <p class="content">
     <p>利用border画出梯形，模拟圆角</p>
 </p>
 <p class="bottom"></p>
</p>

p {   
 box-sizing: border-box;   
}   
.top {   
 height: 0;   
 border-top: 3px solid transparent;   
 border-bottom: 3px solid #111;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.bottombottom {   
 height: 0;   
 border-top: 3px solid #111;   
 border-bottom: 3px solid transparent;   
 border-left: 3px solid transparent;   
 border-right: 3px solid transparent;   
}   
.content {   
 color: #fff;   
 background-color: #111;   
}   
.wrapper {   
 width: 200px;   
 margin: 0 auto;   
}

以上がCSSでborder-radius以外の丸い枠を作る方法を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。