CSS mờ dần đầu và "biên giới" đáy

Question

Hãy xem này: http://jsfiddle.net/wjhnX/

tôi đạt được nó với CSS này:

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

phải là có thể này để làm nhưng biên giới mô phỏng sẽ là đỉnh và đáy , không phải trái và phải không?

Xin cảm ơn!

Answer 1

Bạn có muốn một cái gì đó như thế này không?

Demo (Một số không gian thở cho nội dung của bạn, tôi đã sử dụng margin ở đó, chỉ cần đảm bảo rằng nó sẽ áp dụng cho cả hai, :before cũng như :after, vì vậy nếu bạn muốn tách riêng, kê khai lợi nhuận riêng cho từng, ps - tôi đã thực hiện màu sắc lil nhẹ)

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

Giải thích: tôi đã sử dụng :before và :after giả có content: "", vì vậy nó tạo ra một khối, bạn có thể nói một khối ảo bên trong phần tử ... và đó được đặt thành display: block, chỉ cần đảm bảo bạn sử dụng block có lề khác và height sẽ không có hiệu lực .. và cuối cùng nhưng không phải là ít nhất bằng cách sử dụng gradient với rgba để kiểm soát alpha/độ mờ của gradient sẽ mờ dần trên cả hai đầu

Answer 2

bạn có thể làm cho nó với một seperator như tốt.

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