怎么实现阴影效果呢？-白红宇的个人博客

怎么实现阴影效果呢？

发布日期：2021-05-04 19:01:47 浏览次数：24 分类：原创文章

本文共 676 字，大约阅读时间需要 2 分钟。

我们在前端的设计中常常会用到图片和文字，如果只是单调的图片或文字，不怎么好看。所以我们要给它别的效果，比如：阴影效果。要实现阴影效果，我们就要用到box-shadow属性，它是一个复合属性，用于整个盒模型添加阴影。它有4个属性值：水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。好了让我们看下有阴影和没有的区别。
代码：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#divone {    	width: 300px;	height: 300px;	margin: 200px auto;	padding: 10px;	font-size: 25px;	text-align: center;	line-height: 300px;	border: 10px solid #900;	border-radius: 40px;}</style></head><body><div id="divone">	<img src="./null-7625848be744b51b.jpg" style="width: 300px; height: 300px;" alt=""></div></body></html>

效果图：
在这里插入图片描述
我们给它加一句代码看看：

box-shadow: 10px 10px 5px #000000;/*对盒子添加阴影*/

下面是添加了阴影的：
在这里插入图片描述
是不是好看一点了呢，那你们学会了吗(๑＞ڡ＜)✿

上一篇：伪类的用法

下一篇：轮播有可能出现的问题

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章