css阴影效果制作

最新推荐文章于 2024-05-11 17:07:55 发布

北岭敲键盘的荒漠猫

最新推荐文章于 2024-05-11 17:07:55 发布

阅读量314

点赞数 5

分类专栏：前端一条龙文章标签： css 前端

本文链接：https://blog.csdn.net/2302_79590880/article/details/138197421

版权

前端一条龙专栏收录该内容

19 篇文章 1 订阅

订阅专栏

前言

欢迎来到我的博客

个人主页：北岭敲键盘的荒漠猫-CSDN博客

本文为我整理的为盒子添加阴影效果的方法

阴影效果展示

可以帮我们制作这种立体效果。

也可以用这个阴影作为一个选中效果。

阴影属性

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

属性	作用
h-shadow	水平阴影位置（水平移动）
v-shadow	垂直阴影位置（垂直移动）
blur	模糊距离（变模糊）
spread	阴影尺寸（阴影大小）
color	阴影颜色（阴影颜色）
inset	设置内部阴影（）

注意事项：阴影不属于实际盒子，不会占用空间从而影响其他盒子排列。

案例演示

鄙人博客欢迎页面跳转按钮案例

原本是这样的。

#into {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: transparent url(../images/welcome/head.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
}

头像是a链接，我们给他添加阴影。

美化操作：

首先我们用 border-radius: 50%;把他正方形切成圆形盒子。

然后添加

#into:hover {
    box-shadow: 1px 1px 5px 5px rgba(25, 168, 255, 0.5);
}

给他添加选中时的效果。于是我们就可以看到只要鼠标在按钮上，就会发光了。

（右上角有一点小空隙，是因为css切圆跟我图像大小不完全吻合造成的一点点小小的空隙，不过影响不大，不修改了）

文字的阴影

不仅盒子可以制作阴影，文字也可以制作阴影。

语法：

text-shadow: h-shadow v-shadow blur color;

属性设置跟盒子的一模一样。

案例演示

    <style>
        #a {
            font-size: 100px;
            color: palegoldenrod;
            text-shadow: 10px 10px 10px palegreen;
        }
    </style>
</head>

<body>
    <p id="a">你好</p>
</body>

效果如下：