【Web前端实操13】实现100*100的盒子的阴影效果,阴影值自拟

相关知识点:

盒阴影

box-shadow 向框添加一个或多个阴影。

1

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

描述
h-shadow 必选,水平阴影的位置
v-shadow 必选,垂直阴影的位置
blur 可选,模糊距离
spread 可选,阴影的尺寸
color 可选,阴影的颜色
inset 可选,外部引用修改为内部阴影
字阴影

text-shadow 属性向文本设置阴影

text-shadow: h-shadow v-shadow blur color;
描述
h-shadow 必选,水平阴影的位置
v-shadow 必选,垂直阴影的位置
blur 可选,模糊距离
color 可选,阴影的颜色

代码如下:




    
    
    实现100*100的盒子的阴影效果,阴影值自拟
    


    

实现效果:

【Web前端实操13】实现100*100的盒子的阴影效果,阴影值自拟_第1张图片

你可能感兴趣的:(Web前端实操,前端,javascript,开发语言)