box-shadow 参数说明

box-shadow: h-shadow v-shadow blur spread color inset

h-shadow（X轴）必需

第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。

v-shadow（Y轴）必需

第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。

blur（模糊距离）可选

第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。

spread（阴影范围）可选
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
color （阴影的颜色）可选
inset （内部阴影）可选

box-shadow 四边阴影单独设置

<html><style>.box-shadow-top{box-shadow: 0 -1px; /* 上外阴影，y坐标向上偏移，x不偏移 */}.box-shadow-bottom{box-shadow: 0 1px; /* 下外阴影 */}.box-shadow-left{box-shadow: -1px 0; /* 左外阴影 */}.box-shadow-right{box-shadow: 1px 0 ; /* 右外阴影 */}.box-shadow-top-inset{box-shadow:inset 0 1px; /* 上内阴影 */}.box-shadow-bottom-inset{box-shadow:inset 0 -1px; /* 下内阴影 */}.box-shadow-left-inset{box-shadow:inset 1px 0; /* 左内阴影 */}.box-shadow-right-inset{box-shadow:inset -1px 0 ; /* 右内阴影 */}.left{display:inline-block;background-color: antiquewhite;width: 100px;height: 100px;}div{    margin: 5px ;line-height: 100px;text-align: center;}</style><body><div><div class="box-shadow-top left">上外阴影</div><div class="box-shadow-bottom left">下外阴影</div><div class="box-shadow-left left">左外阴影</div><div class="box-shadow-right left">右外阴影</div></div><div><div class="box-shadow-top-inset left">上内阴影</div><div class="box-shadow-bottom-inset left">下内阴影</div><div class="box-shadow-left-inset left">左内阴影</div><div class="box-shadow-right-inset left">右内阴影</div></div></body>
</html>

设置效果如下：

阴影的颜色通常是使用纯色，当然也可以使用渐变色。

box-shadow单边阴影设置相关推荐

Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
Shadow Map阴影贴图技术之探【转】
这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
【CSS】单边阴影、双边阴影、三边阴影
实现阴影,先来了解一下box-shadow这个属性. MDN上的定义:box-shadow 属性用于在元素的框架上添加阴影效果.你可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开.该属性可设置 ...
UE4Android聚光灯投影,ue4商城资源Volumetric Spotlight with Shadow带阴影的体积聚光灯
Unreal Engine虚幻游戏引擎素材资源 Unreal Engine Marketplace –Volumetric Spotlight with Shadow带阴影的体积聚光灯 "体 ...
CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
html中投影效果图,利用CSS3（box shadow）制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
OpenGL point shadow点阴影的实例
OpenGL point shadow点阴影先上图,再解答. 完整主要的源代码源代码剖析先上图,再解答. 完整主要的源代码 #include <glad/glad.h> #inclu ...

box-shadow单边阴影设置

box-shadow 参数说明

box-shadow 四边阴影单独设置

box-shadow单边阴影设置相关推荐

最新文章

热门文章