盒子阴影 如何实现。

盒子阴影是什么。
咱们先看看原图:

咱看一下加上阴影的图:

看到效果了吗?
接下来 我教大家如何实现:

首先在HTML里面插入一张图片:

<img src="../img/宝马.jpg" alt="">

然后在CSS里面写样式:
代码:

box-shadow: 0px 0px 5px 7px #ccc;

来解释一下这个代码:

box-shadow: 这是盒子阴影的意思;

第一个0px;(水平方向移动=X轴);

第二个0px;(水平方向移动=Y轴);

第三个5px;(模糊度 像素越大 越模糊);

第四个7px;(模糊延伸度);

第一个 0px;就是X轴 水平方向移动,测试第一个0px;

(负值向左移动,正直向右移动)
例图: 代码:

box-shadow: 20px 0px 5px 7px #ccc;

第二个 0px;就是Y轴 垂直方向移动,测试第二个0px;

(负值向上移动,正直向下移动)
例图: 代码:

box-shadow: 0px 20px 5px 7px #ccc;

第三个 5px;是模糊阴影度,像素越高越模糊,测试第三个5px;

(不可以为负值)

例图: 代码:

box-shadow: 0px 0px 50px 7px #ccc;

第四个 7px;是模糊范围,像素越大阴影越大,测试第四个7px;

例图: 代码:

box-shadow: 0px 0px 5px 50px #ccc;

(不可以为负值)

第五个 #ccc; 是阴影颜色,咱们换个色红看看。

代码:

box-shadow: 0px 0px 5px 7px red;

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 577评论 0 7
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,398评论 1 88
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 654评论 0 6
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 285评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,395评论 1 40