100字范文 > 【CSS基础】box-shadow盒子阴影（重点）

【CSS基础】box-shadow盒子阴影（重点）

时间：2022-02-18 20:28:10

1. 知识点

作用：为盒子添加阴影。

注意：

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。盒子阴影不占空间，不会影响其他盒子排列。

2. 代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {width: 100px;height: 100px;background-color: pink;margin: 100px auto;box-shadow: 10px 10px 10px 10px black;}</style></head><body><div class="container"></div></body></html>

这个代码的用法，大家打开google的调试工具，去调整px的值，就可以清晰地看出各种参数的作用。我简单介绍一下：第一个参数控制阴影的水平方向（右为正，左为负），第二个参数控制阴影的垂直方向（上为负，下为正），第三个参数控制阴影的虚实，第四个参数控制阴影的大小。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。