純粋な CSS3_html/css_WEB-ITnose を使用してスピンドル ディバイダーを作成する

スピンドル分割線は、紙の中央をカットしたとき、つまり中央が大きく開いて両側が集まったときの影の効果をシミュレートするために使用されます。

簡単に言うと、両端が小さくて真ん中が大きいです。以下に示すように (中央のすごいアイコンは無視してください):

この効果を実現するには CSS3 を使用します。border-radius プロパティと box-shadow プロパティを使用できます。

まず、分割線に対応する DIV が必要です。

<div class="mask"></div>

次に、class=mask を指定した div を使用してボックス シャドウを生成します:

box-shadow: 0 0 8px black;

box-shadow の構文を比較します:

このステートメントは、ぼかし距離が 8px であり、色は黒です。 ボックスの影は次のとおりです。

得られるのは同じ高さの影ですが、今度は中央から両側に向かって徐々に狭くする方法を見つける必要があります。

そのような円弧を取得するには、要素の境界半径を設定します。

border-radius: 125px/12px;

上記のコードは、2 つの次元をスラッシュで区切っており、要素の角の円弧の水平半径が要素は 125px 、垂直方向の半径は 12px です。明らかに横長の楕円形です。

この楕円要素の下半分は、必要な紡錘形の形状にある程度似ていることがわかりますが、残りはブロックする必要があります。

要素をコンテナに配置し、オーバーフロー コンテンツを非表示にするようにコンテナを設定します (overflow:hidden)。高さは分割線要素よりも数ピクセル小さく、2 つの相対位置を微調整します。

不要な部分を容器で覆うだけです。しかし、これには 2 つの要素を使用する必要があり、それらの相関関係が明確ではなく、コードの保守性は高くありません。

そこで、擬似要素を使用して少し改善し、要素の :after 擬似要素に分割線の影を設定します。 コードは次のとおりです。

.mask {    overflow: hidden;    height: 20px;}.mask:after {    content: '';    display: block;    margin: -25px auto 0;    width: 100%;    height: 25px;    border-radius: 125px/12px;    box-shadow: 0 0 8px black;}

このようにして、紡錘形の形状が得られます。分割線。この区切り線を使用して、タイトル アイコンと本文テキストを区切ることができます。

オンラインで自分で試すことができます (http://wow.techbrood.com/fiddle/6897)。

by iefreer