CSS: tạo ánh sáng trắng xung quanh hình ảnh

Question

Làm cách nào để tạo ánh sáng trắng làm đường viền của hình ảnh có kích thước không xác định?

Answer 1

Sử dụng đơn giản CSS3 (không được hỗ trợ trong IE < 9)

img 
{ 
    box-shadow: 0px 0px 5px #fff; 
} 

này sẽ đặt một ánh sáng trắng xung quanh mỗi hình ảnh trong tài liệu của bạn, sử dụng bộ chọn cụ thể hơn để chọn hình ảnh mà bạn muốn ánh sáng xung quanh . Bạn có thể thay đổi màu sắc tất nhiên :)

Nếu bạn đang lo lắng về những người sử dụng mà không có các phiên bản mới nhất của trình duyệt của họ, sử dụng này:

img 
{ 
-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
box-shadow: 0px 0px 5px #fff; 
} 

Đối với IE bạn có thể sử dụng một ánh sáng rực rỡ lọc (không chắc chắn mà các trình duyệt hỗ trợ nó)

img 
{ 
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5); 
} 

Chơi với các thiết lập để xem những gì phù hợp với bạn :)

Answer 2

Phụ thuộc vào những gì các trình duyệt mục tiêu của bạn. Trong những cái mới hơn đó là as simple as:

-moz-box-shadow: 0 0 5px #fff; 
-webkit-box-shadow: 0 0 5px #fff; 
     box-shadow: 0 0 5px #fff; 

Đối với các trình duyệt cũ, bạn phải thực hiện biện pháp khắc phục, ví dụ, dựa on this example, nhưng bạn có lẽ hầu hết sẽ cần thêm mark-up.

Answer 3

Bạn có thể sử dụng CSS3 để tạo hiệu ứng như vậy, nhưng sau đó bạn sẽ chỉ nhìn thấy nó trong trình duyệt hiện đại hỗ trợ bóng hộp, trừ khi bạn sử dụng một polyfill như CSS3PIE. Vì vậy, ví dụ: bạn có thể làm một việc như sau: http://jsfiddle.net/cany2/

Answer 4

@tamir; bạn cna làm điều đó với tài sản css3.

img{ 
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2; 
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2; 
box-shadow: 0px 0px 3px 5px #f2e1f2; 
} 

séc fiddle http://jsfiddle.net/XUC5q/1/ & bạn có thể tạo ra từ đây http://css3generator.com/

Nếu bạn cần nó để làm việc trong các phiên bản cũ của trình duyệt IE, bạn có thể sử dụng CSS3 PIE bắt chước hộp-shadow trong những trình duyệt & bạn có thể sử dụng filter làm kyle đã nói như thế này

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5') 

bạn có thể tạo bộ lọc từ đây http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Answer 5

đến bữa tiệc muộn tại đây; tuy nhiên chỉ muốn thêm một chút thú vị nữa ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3); 
padding:7px; 

sẽ mang đến cho bạn một hình ảnh đẹp. Các padding sẽ cung cấp cho bạn một biên giới trắng mô phỏng (hoặc bất kỳ biên giới bạn đã thiết lập). các rgba chỉ cho phép bạn làm một sự độc đáo về màu sắc cụ thể; 0,0,0 là màu đen. Bạn có thể dễ dàng sử dụng bất kỳ màu RGB nào khác.

Hy vọng điều này sẽ giúp ai đó!

Answer 6

Hoạt động như một sự quyến rũ!

.imageClass { 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
} 

Thì đấy! Đó là nó! Rõ ràng điều này sẽ không có tác dụng, nhưng ai quan tâm ...