阴影效果之 box-shadow
作者: dkvirus 发表于: 2018-06-06 22:13:00 最近更新: 2018-08-01 22:06:28

参数含义box-shadow: 6px 8px 10px #888 inset;

  • 第一个参数 6px。阴影部分沿 x 轴正方向(右正左负)移动 6px;
  • 第二个参数 8px。阴影部分沿 y 轴正方向(下正上负)移动 8px;
  • 第三个参数 10px。阴影部分距离原图形的距离,只能写正数,该值越大,说明阴影与原图形距离越远,看着也就越模糊;该值越小,说明阴影和原图距离越近,看着越清晰;
  • 第四个参数 #888。阴影的颜色,一般用一些灰色,如:#888888、#ccc;
  • 第五个参数 inset。写第五个参数表示往内部投影,不写第五个参数为往外部投影;

阴影可以同时写多个,如:box-shadow: 6px 6px 6px #888888, -6px -6px 6px #888888;

box-shadow

首页
友链
归档
dkvirus
动态
RSS