web-dev-qa-db-ja.com

CSSの上下の「境界線」

これを見てください： http://jsfiddle.net/wjhnX/ ​​=

私はこのCSSでそれを達成しました：

background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-size:    2px 100%;
background-position: 0 0, 100% 0;
background-repeat:  no-repeat;

これは可能ですか？ただし、シミュレートされた境界線は左右ではなく、上下になりますか？

今後ともよろしくお願いいたします。

cssbackgroundborderbackground-image
16
Jeremy Belolo

このようなものが欲しいですか

Demo （あなたのコンテンツのためのいくつかの呼吸スペース、私はmarginを使用しました、それを確認してください:beforeと:afterの両方に適用されるので、分離したい場合は、それぞれにマージンを宣言してください。ps-色を明るくしました）

/* Using only background gradients */

.one { 
    width: 400px;
    padding: 20px 25px;
    margin: 40px auto;
}

.one:before, .one:after {
    content: "";
    height: 1px;
    /* I've removed the vendor prefixes, if you are looking to support older browsers
       then refer to older version of this answer.
    */
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

説明：私は:beforeと:afterを持つcontent: ""疑似を使用したので、ブロックを作成し、要素内の仮想ブロックと言うことができます。これは、display: blockにさらに設定されます。blockそれ以外の場合は、マージンとheightは効果がありません..そして最後に、rgbaのグラデーションを使用して、両端でフェードするグラデーションのアルファ/不透明度を制御します

28
Mr. Alien

セパレータで作ることもできます。

LIVE DEMO

.seperator
{
    width: 400px;
    height: 2px;
    margin: 30px;
    background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
    background-position: 0, 100%, 0, 100%;
}

.one { 
    width: 400px;
    height: 140px;
    margin: auto;
}
3
Ali Çarıkçıoğlu