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

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

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

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

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

Nếu bạn lo lắng về những người dùng không có phiên bản trình duyệt mới nhất của họ, hãy sử dụng cách 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 bộ lọc phát sáng (không chắc chắn trình duyệt nào hỗ trợ nó)

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

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

@tamir; bạn cna làm điều đó với thuộc tính 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; 
}

kiểm tra fiddle http://jsfiddle.net/XUC5q/1/ & của bạn có thể tạo từ đây http://css3generator.com/

Nếu bạn cần nó hoạt động trong các phiên bản IE cũ hơn, bạn có thể sử dụng CSS3 PIE để mô phỏng box-shadow trong các trình duyệt đó và bạn có thể sử dụng filternhư 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 của mình từ đây http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

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 là điều này sẽ không hoạt động, nhưng ai quan tâm ...

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

   -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ũ hơn, bạn phải triển khai các giải pháp thay thế, ví dụ: dựa trên ví dụ này , nhưng hầu hết bạn sẽ cần thêm đánh dấu.

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

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

sẽ cung cấp cho bạn một hình ảnh đệm đẹp mắt. Phần đệm sẽ cung cấp cho bạn một đường viền trắng mô phỏng (hoặc bất kỳ đường viền nào bạn đã thiết lập). rgba chỉ cho phép bạn tạo opicity trên một màu 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 đó!

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