为图片添加投影阴影效果

很多的博客都使用了图片投影效果,使得图片边框有阴影。

做法其实很简单,就是利用了 CSS3 中的 box-shadow 属性。

box-shadow 属性的用法

语法

  1. box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。

图示

为图片添加投影阴影效果

为图片添加投影阴影效果

为图片添加投影阴影效果

例子

  1. box-shadow:2px 2px 5px #000;

  1. box-shadow:0px 0px 10px #000;

  1. box-shadow:inset 2px 2px 5px #000;

  1. box-shadow:0px 0px 5px 10px #000;

  1. box-shadow:0px 15px 10px -15px #000;

  1. box-shadow:inset 0px 15px 10px -15px #000;

浏览器支持

为图片添加投影阴影效果

如果我的文章对您有帮助,请我喝杯咖啡吧~

支付宝转账打赏⬆️

微信钱包转账打赏⬆️

目前评论:4   其中:访客  2   博主  1   引用   1

  1. 韩国时尚购物起义 0

    知道如何使用知识的人,才是真正的有教养者。

  2. aolose 4

    wordpress在哪里修改呢?

评论加载中...

来自外部的引用: 1

  • 利用浏览器审查元素功能修改代码 | 雨人博客

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: