如何使html块只在一侧投射阴影和/或跟随非方形形状
如何使html块只在一侧投射阴影和/或跟随非方形形状
提问于 2018-07-11 15:59:40
我一直在使用css中的box-shadow样式使用语法
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color尤其是使用offset-x=offset-y=0。当这样做的时候，我得到了一个阴影在所有4个方面。我不想这样。
我想让它只在盒子的一侧或两侧投射阴影，可以吗？
假设盒子围绕着一个非正方形的形状，盒子有一个透明的背景，里面有一个png或svg，说明了一个非矩形的形状。此框被叠加到网页上。有没有可能让box-shadow遵循该div块内部的内容轮廓，而不是透明的div块本身？
我是说，这看起来很愚蠢：
编辑:应请求的一些示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-color: transparent;
padding: 10px;
box-shadow: 6px 6px 21px -21px #CCC;
}
#example2 {
background-color: transparent;
padding: 10px;
box-shadow: 0px 0px 21px #CCC;
}
</style>
</head>
<body>
<h2>box-shadow: 6px 6px 21px blur radius light-gray on lower right side:</h2>
<div id="example1">
<p>A light shadow on only two sides.</p>
</div>
<h2>box-shadow: 0px 0px 21px blur radius light-gray centered:</h2>
<div id="example2">
<p>This is what I want it to look like; a <u>centered</u> shadow but only cast on the right and the bottom, not on all four sides of the div block which has a <u>transparent</u> background.</p>
</div>
</body>
</html>
回答 6
Stack Overflow用户
发布于 2018-07-11 16:15:50
有许多在线工具可以根据您的需求生成现成的css代码。online generate box shadow css
Stack Overflow用户
发布于 2018-07-11 16:19:43
您正在寻找drop-shadow筛选器
.box {
margin:50px;
width:200px;
height:200px;
background:linear-gradient(to bottom right,red 50%, transparent 0);
filter:drop-shadow(10px 0 5px #000);
}<div class="box">
</div>
Stack Overflow用户
发布于 2018-07-11 16:23:29
您需要像下面这样修改box-shadow属性，以便仅获得框的一侧或两侧的阴影。
.box-shadow
{
width: 150px;
height: 150px;
border: 1px solid #888;
-webkit-box-shadow: 5px 5px 5px -2px #888;
box-shadow: 5px 5px 5px -2px #888;
}<div class="box-shadow"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51280165
复制相关文章
相似问题
腾讯云开发者
