cách đặt bóng cho hình ảnh tròn (css)

Question

Tôi mới làm bóng trong css, chúng tôi có thể đặt bóng cho hình ảnh tròn (ý tôi là hình tròn).

nếu có thể, vui lòng cung cấp cho tôi mã này trong css. cảm ơn trước

Answer 1

Bóng hộp CSS3 áp dụng bóng cho phần tử chứ không phải nội dung của phần tử. Nói cách khác, nếu bạn có hình ảnh (hình chữ nhật) nhưng bản thân hình ảnh là hình tròn, bóng sẽ được áp dụng cho phần tử hình ảnh hình chữ nhật chứ không phải chủ thể thực của hình ảnh.

CẬP NHẬT:

Tất nhiên, bạn luôn có thể sử dụng phần tử canvas để chơi với bóng tối. Dưới đây là jsFiddle example cả hai vẽ vòng tròn và tải một vòng tròn, sau đó áp dụng hiệu ứng đổ bóng cho cả hai.

Answer 2

Có hướng dẫn tuyệt vời cho hộp shadowing với các ví dụ here

Ngoài ra, css3 đơn giản để làm tròn góc trong trình duyệt chéo

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

chỉ cần điều chỉnh pix đến độ tròn góc bạn muốn hoặc sử dụng em s thay vì

Answer 3

CSS không cho phép bạn thêm bóng tối vào hình dạng INSIDE hình ảnh. CSS không có đầu mối hình ảnh trông như thế nào.

Answer 4

Có một thuộc tính trong css3 làm chính xác những gì bạn muốn. Nhưng, tất nhiên, điều này chưa được thực hiện bởi tất cả các trình duyệt (IE ...) Có một cái nhìn ở đó: http://css-tricks.com/snippets/css/css-box-shadow/

Answer 5

Điều này là không thể vì CSS không biết hình dạng của nội dung hình ảnh (ví dụ minh bạch). Bạn có thể tạo vòng tròn bằng CSS3 và tạo bóng, see this jsFiddle.

div { 
    background: red; 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    margin: 20px; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
} 

Answer 6

Điều này phù hợp với tôi. Tôi muốn có một bóng tròn xung quanh hình ảnh 32x32.

<a class="media-links" href=""> 
    <img class="media-imgs" src=""> 
</a> 

CSS là như thế này.

 img.media-imgs 
     { 
      -webkit-border-radius: 20px; 
     } 

     img.media-imgs:hover 
     { 
       -webkit-animation-name: greenPulse; 
       -webkit-animation-duration: 2s; 
       -webkit-animation-iteration-count: 1; 
       -webkit-box-shadow: 0 0 18px #91bd09; 
     } 

Answer 7

Có, chỉ cần thêm bán kính đường viền: 50% cho hình ảnh cùng với thuộc tính hộp bóng :) hoạt động trong thẻ img của tôi.

Answer 8

bóng độc lập với hình dạng trong css, bạn có thể sử dụng thuộc tính bóng cho vòng tròn sau khi tạo vòng kết nối. Bạn có thể sử dụng đoạn mã sau cho rằng, cần làm việc tốt

.circle{ 
    width:150px;height:150px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    border-radius:100px; 
}