如何爲圓形圖像設置陰影（css）

我是新來的陰影在CSS我們可以設置陰影爲圓形圖像（我的意思是一個圓形圖像）。如何爲圓形圖像設置陰影（css）

如果可能的話，請給我一個在css中的代碼。由於事先

來源

2012-03-21 FreshBits

CSS3框陰影將陰影應用於元素，而不是元素的內容。換句話說，如果你有一個圖像（它是矩形的），但圖像本身是一個圓圈，陰影將被應用到矩形圖像元素，而不是圖像的實際主體。

UPDATE：

當然，你總是可以使用canvas元素與陰影玩。這裏有一個jsFiddle example都繪製一個圓和加載一個圓，然後對兩者都應用陰影效果。

來源

2012-03-21 16:01:42 j08691

還有就是偉大的教程，範例箱陰影here

而且，簡單的CSS3的跨瀏覽器四捨五入角落

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

只是調整PIX到你想要的邊角圓度，或者使用em代替

來源

2012-03-21 15:58:35 SpYk3HH

CSS不允許將陰影添加到形狀INSIDE圖像中。 CSS不知道圖像的樣子。

來源

2012-03-21 15:59:21

在css3中有一個屬性正在做你想要的。但是，當然，這還沒有被所有瀏覽器（IE ...）執行。看看那裏：http://css-tricks.com/snippets/css/css-box-shadow/

來源

2012-03-21 15:59:37 haltabush

IE9支持的box-shadow，但以前的IE版本，你需要somesort – SpYk3HH 2012-03-21 16:01:29

這是不可能的，因爲CSS不知道圖像內容的形狀（例如，解釋透明度）。你可以用CSS3製作一個圓圈並給出一個影子，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); 
}

來源

2012-03-21 16:01:26

的JS轉換功能不那麼真實，圖像可以是圓的以及使用相同的技術，請參閱[小提琴]（http://jsfiddle.net/SpYk3/MQrqh/） – SpYk3HH 2012-03-21 16:04:09

你是對的，編輯我的答案，以澄清我的實際意思。 – 2012-03-21 16:09:06

正如sptk3hh說，看看這裏http://jsfiddle.net/ZjMbh/6/ – 2012-03-21 16:10:11

這件事情對我有用。我想要32x32圖像周圍的圓形陰影。

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

CSS就是這樣。

 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; 
     }

來源

2013-07-23 02:05:24

是的，只需在您的圖像中添加一個邊框半徑：50％以及框陰影屬性:)在我的img標籤中工作。

來源

2016-08-01 06:22:56

陰影與css中的形狀無關，可以在創建圓後使用陰影屬性作爲圓。您可以使用下面的代碼，它應該工作正常

.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; 
}

來源

2016-08-01 06:36:29

如何爲圓形圖像設置陰影（css）

回答

相關問題