通过应用多个盒子阴影,我可以很好地处理具有纯色背景的对象:
HTML:
<div></div>
的CSS:
div{width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: rgb(0,150,0);
box-shadow: -15px 0 12px rgba(0,150,0,0.2)
, -11px 0 10px rgba(0,150,0,0.4)
, -8px 0 8px rgba(0,150,0,0.6)
, -6px 0 6px rgba(0,150,0,0.8)}
这不是理想的,因为你会从元素而不是向左上下阴影,但是它有点起作用。
但我真正想要的是它可以很好地处理背景图像,例如:在this jsFiddle中,我希望div
(或至少背景图像的边缘)边缘的颜色可以伸展出来。
我该怎么做? 可以我吗?
谢谢
答案 0 :(得分:3)
您可以添加::before
然后复制元素并将其模糊。
div{
position: relative;
width: 50px;
height: 50px;
margin: 100px;
border-radius: 25px;
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
}
div::before {
background: url(https://i.imgur.com/pDj7wo9.png);
background-size: cover;
background-position: left center;
position: absolute;
width: 55px;
height: 55px;
overflow: hidden;
z-index: -1;
filter: blur(5px);
content: "";
border-radius: 100%;
}
<div></div>