blocks|key|5332195|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5332196|box-shadow:+10px+0+10px+#333;|code-block|syntax|javascript|5332197|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you can do like this:</p>

<pre><code>box-shadow: 10px 0 10px #333;
</code></pre>


blocks|key|5332220|text|是的，这是可能的，请看一下这里的https://css-tricks.com/almanac/properties/b/box-shadow/，你会找到对你有帮助的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5332221|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/properties/b/box-shadow/^0|G|1J|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Yes it is possible, please take a look here <a href="https://css-tricks.com/almanac/properties/b/box-shadow/" rel="nofollow noreferrer">https://css-tricks.com/almanac/properties/b/box-shadow/</a>, you will find examples that will help you.</p>


blocks|key|3864210|text|有许多在线工具可以根据您的需求生成现成的css代码。online+generate+box+shadow+css|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3864211|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webestools.com/css3-box-shadow-generator-css-property-easy-shadows-div-html5-drop-shadow-moz-webkit-shadow-maker.html^0|Q|U|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>There is many of the online tools which generates a ready css code as per your requirements.
<a href="http://www.webestools.com/css3-box-shadow-generator-css-property-easy-shadows-div-html5-drop-shadow-moz-webkit-shadow-maker.html" rel="nofollow noreferrer">online generate box shadow css</a></p>


blocks|key|5332312|text|您正在寻找drop-shadow筛选器|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5332313|​|5332314|.box+{
+margin:50px;
+width:200px;
+height:200px;
+background:linear-gradient(to+bottom+right,red+50%25,+transparent+0);
+filter:drop-shadow(10px+0+5px+#000);
}|code-block|syntax|javascript|5332315|<div+class="box">
</div>|5332316|5332317|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow^0|5|B|5|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You are looking for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow" rel="nofollow noreferrer"><code>drop-shadow</code></a> filter</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
 margin:50px;
 width:200px;
 height:200px;
 background:linear-gradient(to bottom right,red 50%, transparent 0);
 filter:drop-shadow(10px 0 5px #000);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|5332332|text|您需要像下面这样修改box-shadow属性，以便仅获得框的一侧或两侧的阴影。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5332333|​|5332334|.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;
}|code-block|syntax|javascript|5332335|<div+class="box-shadow"></div>|5332336|5332337|entityMap^0|A|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>You need to modify <code>box-shadow</code> properties like below to get shadow only one or two sides of the box.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box-shadow"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1549198|text|你想这样说吗？但不能在带有阴影的SVG中使用透明。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1549199|​|1549200|<!DOCTYPE+html>
<html>
<head>
<style>+
.triangle-container{
++++++++transform:+rotate(-90deg);+
++}
+++.triangle{
++++fill:+white;
++++stroke:+white;
++++stroke-width:+1;
++++filter:+drop-shadow(-10px+5px+5px+rgba(204,204,204,0.1));
++++}
</style>
</head>
<body>
<div+class="triangle-container">
	++<svg+height="500"+width="500">
		++++<polygon+points="250,100+100,400+400,400"+class="triangle"+/>
		++++Sorry,+your+browser+does+not+support+inline+SVG.
	++</svg>
</div>
</body>
</html>|code-block|syntax|javascript|1549201|1549202|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Do you want to say like this? But cannot use transparent in SVG with shadow.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 
.triangle-container{
        transform: rotate(-90deg); 
  }
   .triangle{
    fill: white;
    stroke: white;
    stroke-width: 1;
    filter: drop-shadow(-10px 5px 5px rgba(204,204,204,0.1));
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="triangle-container"&gt;
	  &lt;svg height="500" width="500"&gt;
		    &lt;polygon points="250,100 100,400 400,400" class="triangle" /&gt;
		    Sorry, your browser does not support inline SVG.
	  &lt;/svg&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I've been playing around with the <code>box-shadow</code> style in css using the syntax</p>

<pre><code>box-shadow : offset-x | offset-y | blur-radius | spread-radius | color
</code></pre>

<p>particularly with <code>offset-x=offset-y=0</code>. When doing this, I get a shadow on all 4 sides. I don't want that.</p>

<p>I want to make it cast shadow on only one or two sides of the box, is that possible?</p>

<p>Say that the box surrounds a non squared shape, the box has a transparent background with a <code>png</code> or <code>svg</code> inside that illustrates a non-rectangular shape. This box is overlayed onto a web-page. Is it possible to make the <code>box-shadow</code> instead follow the contour of the contents inside that div-block instead of the transparent div-block itself?</p>

<p>I mean, this just looks plain stupid:</p>

<p><a href="https://i.stack.imgur.com/k8LbK.png" rel="nofollow noreferrer">Image</a></p>

<p>Edit: Some example code as requested:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt; 

#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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;box-shadow: 6px 6px 21px blur radius light-gray on lower right side:&lt;/h2&gt;
&lt;div id="example1"&gt;
&lt;p&gt;A light shadow on only two sides.&lt;/p&gt;
&lt;/div&gt;

&lt;h2&gt;box-shadow: 0px 0px 21px blur radius light-gray centered:&lt;/h2&gt;
&lt;div id="example2"&gt;
&lt;p&gt;This is what I want it to look like; a &lt;u&gt;centered&lt;/u&gt; shadow but only cast on the right and the bottom, not on all four sides of the div block which has a &lt;u&gt;transparent&lt;/u&gt; background.&lt;/p&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


How to make an html block cast shadow on only one side and/or follow non squared shapes

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我一直在使用css中的box-shadow样式使用语法box-shadow : offset-x | offset-y | blur-radius | spread-radius | color尤其是使用offset-x=offset-y=0。当这样做的时候，我得到了一个阴影在所有4个方面。我不想这样。我想让它只在盒子...

问如何使html块只在一侧投射阴影和/或跟随非方形形状
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使html块只在一侧投射阴影和/或跟随非方形形状EN