当光撞击物体并投射阴影时,阴影可能呈现出许多独特的特征。那么,如果您尝试捕捉真实阴影的微妙之处,box-shadow那么您就很不走运了。该box-shadowCSS属性是不完全建立鼓励表现。它本质上会产生对象的模糊轮廓-您可以更改其偏移,模糊半径,散布和颜色,仅此而已。我们无法接近地表达现实生活中阴影的复杂性 WP网站建设
当光撞击物体并投射阴影时,阴影可能呈现出许多独特的特征。那么,如果您尝试捕捉真实阴影的微妙之处,box-shadow
那么您就很不走运了。该box-shadow
CSS属性是不完全建立鼓励表现。它本质上会产生对象的模糊轮廓-您可以更改其偏移,模糊半径,散布和颜色,仅此而已。我们无法接近地表达现实生活中阴影的复杂性和细微差别。
但是,通过简单的CSS技术,我们可以扩展选择范围。如果使用layered,box-shadow
我们可以对阴影的渲染方式进行更细粒度的控制:
查看默认box-shadow
效果(第一个框)与分层效果box-shadow
(第二个框)相比,方形和笨拙的外观。我们可以通过创建多个box-shadows
(用逗号分隔每个阴影),并为每个阴影增加偏移量和模糊(box-shadow
语法为X-offset Y-offset blur color
)来实现此效果:
/* Default box-shadow */ .box { box-shadow: 0 3px 3px rgba(0,0,0,0.2); } /* Create smoother box-shadows by layering multiple * shadows with gradually increasing radius and offset */ .shadow-5 { box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12); }
这种简单的分层技术使我们可以更好地控制阴影的渲染,并可以微调清晰度,距离和散布。例如,您可以增加或减少阴影数量以创建较小或较大的跨度。 (请注意,如果希望增加强度,则如果增加层数,则必须降低每个层的Alpha值。)![]()
.shadow-4 {
box-shadow: 0 1px 1px rgba(0,0,0,0.15),
0 2px 2px rgba(0,0,0,0.15),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.15);
}
.shadow-6 {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 8px 8px rgba(0,0,0,0.11),
0 16px 16px rgba(0,0,0,0.11),
0 32px 32px rgba(0,0,0,0.11);
}
控制清晰度与控制散布一样容易,但是我们可以同时使用每层的Alpha值和模糊值来分别更改阴影的深度浓度和模糊半径。
上面的示例对所有图层使用相同的alpha值,但是我们可以让alpha值随着每一层的增加或减少而创建更多或更少的漫反射阴影。
对于下面更集中的阴影,最里面的阴影(具有最小的偏移和模糊)具有最高的alpha值,并且每层都减小。相反,第二个框的阴影更加分散,其中最内层的alpha值最低:
.blog-shadow-sharp {
box-shadow: 0 1px 1px rgba(0,0,0,0.25),
0 2px 2px rgba(0,0,0,0.20),
0 4px 4px rgba(0,0,0,0.15),
0 8px 8px rgba(0,0,0,0.10),
0 16px 16px rgba(0,0,0,0.05);
}
.blog-shadow-diffuse {
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);
}
我们还可以增加blur
更高的增量,以增加传播并创建更柔和的,几乎是梦幻的效果:
.blog-shadow-dreamy {
box-shadow: 0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07),
0 16px 32px rgba(0,0,0,0.07),
0 32px 64px rgba(0,0,0,0.07);
}
最后,我们可以通过将模糊半径和Y偏移量解耦来控制距离,并以更大或更小的增量来增加偏移量:
.shadow-shorter {
box-shadow: 0 1px 1px rgba(0,0,0,0.11),
0 2px 2px rgba(0,0,0,0.11),
0 4px 4px rgba(0,0,0,0.11),
0 6px 8px rgba(0,0,0,0.11),
0 8px 16px rgba(0,0,0,0.11);
}
.shadow-longer {
box-shadow: 0 2px 1px rgba(0,0,0,0.09),
0 4px 2px rgba(0,0,0,0.09),
0 8px 4px rgba(0,0,0,0.09),
0 16px 8px rgba(0,0,0,0.09),
0 32px 16px rgba(0,0,0,0.09);
}
当然,要使用所有这些技术的哪种组合很大程度上取决于您所处的环境,但是使用分层阴影,我们至少可以获得更多控制权,以帮助我们获得所需的外观。
原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11996

服务项目 | 服务内容 | 收费标准(元) |
---|---|---|
开发定制 | WordPress主题/插件开发定制 | (以最终需求为准) |
主题/插件汉化 | 汉化团队WordPress主题/插件,翻译率95% | (以标的主题/插件的句子数量为准) |
服务器环境配置 | 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 | 100元/次 |
网站托管 | 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 | 标配套餐:1000元/年/站点 高配套餐:联系客服获取 |
网站加速优化 | 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) | 500元/次(仅站内优化200元/次) |
主题配置 | 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 | 英文主题安装 60元/次 汉化主题安装 30元/次 |
HTTPS配置 | HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 | 100元/次 |
网站搬家 | 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 | 标准收费:500元/次 若网站数据量大,需协商 |
网站运维 | 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 | 标准收费:2000元/年 IP 5000以上需协商 |