CSS cho Gradient hộp bóng và biên giới

Question

Có thể làm điều này trong CSS:

Answer 1

Không thực sự trả lời câu hỏi của bạn, nhưng nếu bạn cần phải làm điều này (và không phải trong css), tôi cho rằng bạn đã tạo điều này trong một số chương trình khác, vì vậy bạn có thể thấy điều này hữu ích: a farewell to css3 gradients

Answer 2

Tôi nghĩ rằng điều này có thể được tiếp cận với hai divs mỗi số có radial gradient. Dưới đây là tool to experiment với độ dốc. Nó cũng cung cấp mã của nhà cung cấp cụ thể.

Answer 3

đây là 2 xu của tôi:

HTML:

<div class="upperDiv"></div> 
<div class="lowerDiv"></div> 

CSS:

.upperDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -moz-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -o-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 567, color-stop(0, #E4E4E4), color-stop(1.5, #FDFDFD)); 
background-image: -webkit-radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 
background-image: radial-gradient(center bottom, ellipse farthest-corner, #E4E4E4 0%, #FDFDFD 150%); 

} 

.lowerDiv { 
width:500px; 
height: 40px; 

background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: -webkit-gradient(radial, center top, 0, center top, 567, color-stop(0, #FDFDFD), color-stop(0.8, #F0F0F0)); 
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
background-image: radial-gradient(center top, ellipse farthest-corner, #FDFDFD 0%, #F0F0F0 80%); 
} 

Chiều rộng và chiều cao đang có chỉ để bạn có thể nhìn thấy một cái gì đó. Tôi nghĩ rằng điều này sẽ làm việc trên hầu hết các trình duyệt hiện đại (mặc dù nó có một chút tiết)

Answer 4

Đây là thứ tôi đã đặt cùng nhau. Bạn có thể làm một số rối tung xung quanh với nó nếu bạn muốn.

http://jsfiddle.net/Gk6xJ/

Answer 5

tôi đang làm một cái gì đó tương tự trên một trang web:

width: 60%; height: 20px; background-image: -moz-radial-gradient(center top , ellipse farthest-side, rgba(100, 100, 100, 0.5), rgba(100, 100, 100, 0) 75%), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.5), rgba(200, 200, 200, 0)), -moz-radial-gradient(center top , ellipse farthest-side, rgba(200, 200, 200, 0.3), rgba(200, 200, 200, 0)); background-repeat: no-repeat; background-size: 100% 5px, 100% 10px, 100% 15%;