盒子阴影 如何实现。

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

咱看一下加上阴影的图:

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

首先在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;

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容