css学习笔记-盒子的阴影

最新推荐文章于 2024-07-06 14:45:47 发布

原创最新推荐文章于 2024-07-06 14:45:47 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #阴影

前端开发专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了 CSS 中 box-shadow 属性的使用方法，并通过实例展示了如何调整阴影的位置、模糊程度及颜色，帮助读者掌握这一视觉效果增强技巧。

基本应用

box-shadow:param1 param2 param3 param4

param1:向右偏移

param2:向下偏移

param3:模糊程度

param4:颜色

举例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           box-shadow: 10px 10px 10px grey;
           background-color: aqua;
           width: 100px;
           height: 50px;
       }
    </style>
</head>
<body>
<div></div>

</body>
</html>

若将样式改为:

            box-shadow: 0px 0px 10px grey;
            background-color: aqua;
            width: 100px;
            height: 50px;
            border-radius: 10%;

则可以有周围一圈有一层淡淡的阴影的效果：