在css中，可以用box-shadow特性来设置黑影，词法“box-shadow:X轴 Y轴 尺寸 色调 inset”；在其中“inset”值是可供选择的，再加上时该黑影表明内阴影，不加时赛该黑影表明外黑影。
本实例教程作业环境：windows7系统软件、CSS3&&HTML5版、Dell G3计算机。
box-shadow为css黑影设定，在其中分成外黑影和内阴影，一般默认外黑影
- 外黑影的特性为：X轴 Y轴 px color
特性表明（次序先后相匹配）： 黑影的X轴(可以用负数) 黑影的Y轴(可以用负数) 黑影模糊不清值（尺寸） 黑影颜色
<style>
.one{
margin: auto;
width: 200px;
height: 200px;
border: 1px solid #ffa;
box-shadow: 0 0 20px #000;
}
</style>
<body>
<p class="one">
</p>
</body>最终的结果为：
- 内阴影的特性为：X轴 Y轴 px color inset
特性表明（次序先后相匹配）： 黑影的X轴(可以用负数) 黑影的Y轴(可以用负数) 黑影模糊不清值（尺寸） 黑影颜色 inset
<style>
.one{
margin: auto;
width: 200px;
height: 200px;
border: 1px solid #ffa;
box-shadow: 0 0 20px #000 inset;
}
</style>
<body>
<p class="one">
</p>
</body>最终的结果为：
若相互配合css3动态效果，也会更加奇妙
强烈推荐学习培训：css视频教学
以上就是关于css黑影是怎么做的具体内容，大量欢迎关注AdminJS其他类似文章！
声明：本文为原创，版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载必须注明本文地址!
原文地址：css黑影是怎么做的?发布于2023-03-16 18:36:02
