如何将箱形阴影添加到图像

如何将箱形阴影添加到像使用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

如何将箱形阴影添加到图像

回答

相关问题