Bạn có thể tạo dòng gradient theo kiểu bóng mờ này bằng CSS3 không?

Here's a picture of exactly what I'm trying to produce.Bạn có thể tạo dòng gradient theo kiểu bóng mờ này bằng CSS3 không?

tôi đã có thể để kiểu một <hr /> sử dụng SVG làm hình nền để tạo ra hiệu ứng này, nhưng muốn để có thể tạo ra điều tương tự sử dụng CSS3 Tôi đã nhưng đã gặp rắc rối.

Tôi đã tự hỏi liệu có bất kỳ chuyên gia CSS nào có thể biết cách để đạt được điều tương tự hoặc nếu nó không thực sự có thể với CSS thuần túy?

Cảm ơn bạn đã được trợ giúp.

Nguồn

2012-03-12 C.J.

tôi tạo hiệu ứng mà bạn muốn xin vui lòng kiểm tra này:

http://jsfiddle.net/fx5Lk/

Nguồn

2012-03-12 15:20:56 sandeep

lớn công việc, cảm ơn bạn! –

Vấn đề duy nhất tôi thấy với điều này là nó không mở rộng quy mô. Nếu bạn đã tăng chiều cao của .bor bạn có thể nhận được bóng để phù hợp với w/o cứng mã hóa chiều cao bóng tối mỗi lần? –

Thực tế thiết lập trên và dưới để về ~ (-55px); thay vì thiết lập một chiều cao trên '.sha: sau' khá nhiều hiện này :) –

tôi đã cố gắng để tạo hiệu ứng với ba lớp, hai nguồn gốc với opacity alpha. Một cái bắt đầu ở trên cùng và dừng ở giữa, cái khác bắt đầu ở giữa ở cuối ở dưới cùng, và một nền với một lát của image được lặp lại trong trục y.

tôi theo địa chỉ này cho các lớp hướng dẫn: http://css-tricks.com/css3-gradients/

Mã html, chỉ hoạt động trong Chrome, thay thế/ghi đè lên các tài sản "-webkit-gradient" cho broser cụ thể:

<html> 
    <head> 
    <style> 
    .gradient { 
    width:76px; 
    height:200px; 
    border:0; 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(192,192,192,1)), to(rgba(192,192,192,0))), 
        -webkit-gradient(linear, 0% 50%, 0% 100%, from(rgba(192,192,192,0)), to(rgba(192,192,192,1))), 
        url(http://i41.tinypic.com/omwky.gif); 
    background-repeat:repeat-y,repeat-y, repeat-y; 
    } 
    </style> 
    </head> 
<body> 
    <hr class="gradient"/> 
</body> 
</html>

Nguồn

2012-03-12 15:58:17 rfranr

Bạn có thể tạo dòng gradient theo kiểu bóng mờ này bằng CSS3 không?

Trả lời

Các vấn đề liên quan