css实现元素四周阴影的示例代码
<h2>前言</h2><p>首先确定的是需要使用box-shadow这一属性</p>
<p>语法如下：</p>
<p>box-shadow: h-shadow v-shadow blur spread color inset;</p>
<ul><li>h-shadow：表示水平方向上的阴影偏移量，必须指明，可以是正数、负数、0，如果为正数左方有阴影，如果为负数右方有阴影，如果为0它位于元素的正中间。</li><li>v-shadow：表示垂直方向上的阴影偏移量，必须指明，可以是正数、负数、0，如果是正数则下方有阴影，如果是负数则上方有阴影，如果是0，则在元素正中间。</li><li>blur：表示阴影的模糊程度，可选项，可以是正数、负数。数值越大，阴影越模糊，反之阴影越清晰，如果值为0时表示完全清晰。</li><li>spread：表示阴影的扩张程度，可选项，可以是正数、负数。当扩张程度为正数时阴影扩张，而为负数时阴影收缩，如果值为0，则表示不改变阴影的扩张程度。</li><li>color：表示阴影的颜色，可以采用各种CSS支持的颜色格式进行设置，例如：RGB值，16进制值等等。</li><li>inset：表示是否要将阴影设置为内阴影，可以省略，如果指定了这个值则表示要将阴影设置为内阴影，否则为外阴影。</li></ul>
<h2>实现四周阴影</h2>
<h3>方法一：</h3>
<p>需要分别设置四周阴影，代码如下：</p>
<div class="jb51code"><pre class="brush:css;">div {
width: 300px;
height: 300px;
box-shadow:
5px 5px 5px #00000014,
5px -5px 5px #00000014,
-5px 5px 5px #00000014,
-5px -5px 5px #00000014;
}</pre></div>
<p>效果</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023120415541326.png" /></p>
<h3>方法二：</h3>
<p>四周效果一致，只需控制第三个参数，注意前两个参数不能全为0</p>
<div class="jb51code"><pre class="brush:css;">div {
width: 300px;
height: 300px;
box-shadow: 0 2px 12px 0 pink;
}</pre></div>
<p>效果</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202312/2023120415541327.png" /></p>
頁:
[1]