box-shadow 阴影 设置卡片效果

  设置一个div有卡片的效果,看起来有一种立体的效果,我们只要设置好box-shadow的属性,就Ok了
   box-shadow: x v-shadow blur spread color inset;
   x 表示水平方向的阴影, 正值 阴影显示在右边,负值阴影显示在左边
                      box-shadow: 20px 0 10px #cdcdcd;
image.png
                      box-shadow: -20px 0 10px #cdcdcd;
image.png
y表示垂直方向的阴影,正值表示底部显示,负值表示阴影在顶部显示
 box-shadow:  0 20px 10px #cdcdcd;                
image.png
box-shadow:  0 -20px 10px #cdcdcd;
image.png
制作一个好看的卡片效果
box-shadow:  0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
image.png

你可能感兴趣的:(box-shadow 阴影 设置卡片效果)