如何將箱形陰影添加到圖像

如何將箱形陰影添加到像使用css附加的圖像之類的圖像？如何將箱形陰影添加到圖像

.create-option-thumb-img { 
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14); 
} 

.create-option-thumb-img img { 
    width: 100%; 
    height: auto; 
    vertical-align: bottom; 
    z-index: -1; 
}

我上面下面的代碼和下面的HTML：

<div class="create-option-thumb-img"> 
    <img src="" /> 
</div>

來源

2016-04-21 Jasmine

代碼工作正常。只需使用這些值即可獲得理想的結果。 'box-shadow：0px 1px 20px 10px rgba（0，0，0，0.2）;' – cdm

只要調整style..whatever你想要盒子的影子。謝謝。

.create-option-thumb-img { 
 
    width: 20%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
    z-index: -1; 
 
    box-shadow: 0px 9px 250px -15px #000; 
 
}

<div class="create-option-thumb-img"> 
 
    <img src="https://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-128.png"> 
 
</div>

來源

2016-04-21 06:21:13

，你可以把它添加到您的IMG這樣的：

.create-option-thumb-img img { 
    box-shadow: 0px 0px 40px 0px red; 
}

你不需要的z指數之類的東西。 JSFiddle

你可以隨時檢查元素，並與CSS屬性發揮，以獲得正確的組合:)

來源

2016-04-21 06:21:21

你只需要改變箱陰影線，以得到期望的結果：

box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05);

第一個和第二個數字代表陰影的x和y偏移量，它應該爲0，因爲陰影直接位於圖像下方。

第三個數字是模糊距離，即邊界模糊了多少。

第四個數字是影子的大小，所以這個數字越大，影子就越大。

最後一個屬性值是當前設置爲黑色（0,0,0）的顏色，不透明度爲0.05。不透明度越低，它將與背景融合越多。不透明度越高，其與背景融合的越少。

.create-option-thumb-img { 
 
    margin: 50px; 
 
    box-shadow: 0px 0px 40px 20px rgba(0, 0, 0, 0.05); 
 
} 
 

 
.create-option-thumb-img img { 
 
    width: 100%; 
 
    height: auto; 
 
    vertical-align: bottom; 
 
    z-index: -1; 
 
}

<div class="create-option-thumb-img"> 
 
    <img src="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg" /> 
 
</div>

來源

2016-04-21 06:32:23

試試這個CSS

.create-option-thumb-img img { 
    -webkit-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27); 
    -moz-box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27); 
    box-shadow: -1px 6px 75px 17px rgba(0,0,0,0.27); 
}

只是一個建議：

還有，如果你願意，你可以使用和選擇一些在線盒子陰影CSS生成器是可用您自己的

爲在線css生成器鏈接click me

來源

2016-04-21 06:52:17

如何將箱形陰影添加到圖像

回答

相關問題