立体感很强的小播样式

马黑黑

马黑黑

参考代码

1. <style>
   
2.     .ma {
   
3.         position: absolute;
   
4.         left: 20%;
   
5.         top: 20%;
   
6.         width: 300px;
   
7.         height: 300px;
   
8.         filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.5));
   
9.         animation: rot 8s linear infinite;
   
10.     }
    
11.     .son {
    
12.         position: absolute;
    
13.         width: 50%;
    
14.         height: 50%;
    
15.         background: radial-gradient(at 15% 15%, gold, yellow);
    
16.         border-radius: 50%  100% 0 100%;
    
17.         box-shadow: inset 0 0 34px rgba(120, 110, 0, 1);
    
18.     }
    
19.     .son::before, .son::after {
    
20.         position: absolute;
    
21.         content: '';
    
22.         width: 100%;
    
23.         height: 100%;
    
24.         background: inherit;
    
25.         border-radius: inherit;
    
26.         box-shadow: inherit;
    
27.         transform-origin: 100% 100%;
    
28.         transform: rotate(120deg);
    
29.     }
    
30.     .son::after {
    
31.         transform: rotate(240deg);
    
32.     }
    
33.     @keyframes rot {
    
34.         to { transform: rotate(360deg); }
    
35.     }
    
36. </style>
    
37. 
    
38. <div class="ma">
    
39.     <div class="son"></div>
    
40. </div>

复制代码

马黑黑

营造立体感的核心：

容器元素的 .ma {} 选择器应用 filter 滤镜阴影函数 drop-shadow()，它不能直接使用 box-shadow() 阴影函数，否则会出现矩形阴影，难看S；

子元素的 .son 选择器直接使用 box-shadow() 函数制造阴影，因为它是单一的形状可以酱紫。两个伪元素继承（inherit）了包含阴影在内的诸多个属性值，这样修改时只需要修改主元素的设置。子元素使用的是内阴影，以此增强质感（透明度暂设为1，可以考虑使用 0.x 的值，x大于0小于等于1）。

杨帆

又一个极富立体感的小播按钮诞生了，谢谢马老师再度推出新品

红影

马黑黑 发表于 2025-7-24 13:36
营造立体感的核心：

容器元素的 .ma {} 选择器应用 filter 滤镜阴影函数 drop-shadow()，它不能直接使用 ...

内阴影，设置成1不是很正常么，为什么要在0和1之间呢

红影

原来两种阴影不能随便乱用。
不是3D的立体感小播

马黑黑

杨帆 发表于 2025-7-24 20:09
又一个极富立体感的小播按钮诞生了，谢谢马老师再度推出新品

这是没有启用3d环境下的模拟效果

马黑黑

红影 发表于 2025-7-24 20:33
原来两种阴影不能随便乱用。
不是3D的立体感小播

这需要看形状。如果只是自己边框弄成的形状等，直接使用 box-shadow 合适，如果带有其它有形状的元素，得用滤镜方式。可以自己尝试体验。

马黑黑

红影 发表于 2025-7-24 20:31
内阴影，设置成1不是很正常么，为什么要在0和1之间呢

我说的是 rgba(...) 中的 a 暂时设置为 1 ，没有透明度。颜色的alpha通道开启，阴影效果应该更理想。

阴影自身有一个透明度参数，再加上颜色也带透明度，会更神奇。

红影

马黑黑 发表于 2025-7-24 21:46
这需要看形状。如果只是自己边框弄成的形状等，直接使用 box-shadow 合适，如果带有其它有形状的元素，得 ...

这个好像以前黑黑就说过，但我们两种阴影本来就没弄清楚

红影

马黑黑 发表于 2025-7-24 21:48
我说的是 rgba(...) 中的 a 暂时设置为 1 ，没有透明度。颜色的alpha通道开启，阴影效果应该更理想。

...

哦哦，原来是说的这个。是的，阴影有透明度，再加上颜色透明度，的确会营造出神奇的效果呢

马黑黑

红影 发表于 2025-7-24 22:29
这个好像以前黑黑就说过，但我们两种阴影本来就没弄清楚

滤镜阴影 filter: drop-shadow() 是投射阴影，它有透视功能，仅对存在的形状投射出阴影；

box-shadow 阴影基于盒子模型，它制造出的阴影可能是矩形的，特定情况下它也具备透视功能。

马黑黑

红影 发表于 2025-7-24 22:31
哦哦，原来是说的这个。是的，阴影有透明度，再加上颜色透明度，的确会营造出神奇的效果呢

很多人主张做盒子阴影应该酱紫做

红影

马黑黑 发表于 2025-7-24 22:33
滤镜阴影 filter: drop-shadow() 是投射阴影，它有透视功能，仅对存在的形状投射出阴影；

box-shadow  ...

原来是这样，看起来滤镜阴影的应用更广泛啊。

红影

马黑黑 发表于 2025-7-24 22:36
很多人主张做盒子阴影应该酱紫做

是因为效果更好吧。

马黑黑

红影 发表于 2025-7-24 22:48
是因为效果更好吧。

应该是的

马黑黑

红影 发表于 2025-7-24 22:46
原来是这样，看起来滤镜阴影的应用更广泛啊。

它不会在意外的情况下产生矩形阴影，除非盒子本身就是矩形。

具体点说，filter投射阴影时会自动过滤掉影像的透明部分，只有呈现出来的部分才会产生阴影。

box-shadow 在很多情况下也能过滤透明部分，但它不总是能过滤。

红影

马黑黑 发表于 2025-7-25 18:06
应该是的

透明度营造的梦幻效果。

红影

马黑黑 发表于 2025-7-25 18:09
它不会在意外的情况下产生矩形阴影，除非盒子本身就是矩形。

具体点说，filter投射阴影时会自动过滤掉 ...

那就尽量使用filter阴影呗，少用盒子阴影？