gpt4 book ai didi

html - 如何使 html block 仅在一侧转换阴影和/或遵循非方形形状

转载 作者:行者123 更新时间:2023-11-28 15:46:24 24 4
gpt4 key购买 nike

我一直在使用语法在 css 中使用 box-shadow 样式

box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

特别是 offset-x=offset-y=0。这样做时,我会在所有 4 个面都有阴影。我不想这样。

我想让它只在盒子的一侧或两侧转换阴影,这可能吗?

假设盒子围绕着一个非正方形,盒子有一个透明的背景,里面有一个 pngsvg 来说明一个非矩形的形状。此框覆盖在网页上。是否可以使 box-shadow 跟随 div block 内内容的轮廓而不是透明 div block 本身?

我的意思是,这看起来很愚蠢:

Image

编辑:根据要求编辑一些示例代码:

<!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>

最佳答案

您正在寻找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>

关于html - 如何使 html block 仅在一侧转换阴影和/或遵循非方形形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51280165/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com