सीएसएस ऊपर और नीचे "सीमाओं" fading

Question

इस पर एक नज़र डालें: http://jsfiddle.net/wjhnX/

मैं इस सीएसएस के साथ हासिल की:

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

करने के लिए यह संभव है, लेकिन नकली सीमाओं ऊपर और नीचे होगा , बाएं और दाएं नहीं?

आगे धन्यवाद!

Answer 1

क्या आप ऐसा कुछ चाहते हैं?

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 पर सेट है, बस सुनिश्चित करें कि आपका उपयोग करेंकुछ और मार्जिन और height कोई असर नहीं होगा .. और पिछले नहीं बल्कि कम से कम रहा rgba साथ ढ़ाल का उपयोग कर ढाल के अल्फा/अस्पष्टता जो दोनों पर फीका करना होगा नियंत्रित करने के लिए समाप्त हो जाती है

Answer 2

आप इसे के रूप में एक विभाजक के साथ कर सकते हैं कुंआ।

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; 
}