html-2 盒子阴影

最新推荐文章于 2024-03-14 23:11:12 发布

独钓寒江雪～

最新推荐文章于 2024-03-14 23:11:12 发布

阅读量1.6k

点赞数 4

分类专栏： HTML练习文章标签： html css3 css

本文链接：https://blog.csdn.net/bdqx_007/article/details/122080011

版权

HTML练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

box-shadow 的语法如下:

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

第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。
值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。
值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方
第三个长度值代表了阴影的模糊半径,即模糊程度，可选
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，
则整个阴影都延展扩大，反之值为负值是，则缩小即阴影一圈的大小
第五个参数 color 部分的值正如你所预料的，是指阴影的颜色。
它可以是任意的颜色单元

<!DOCTYPE html>
<Html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>盒子阴影</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color:pink;
                margin: 100px auto;
            }
            div:hover{
                box-shadow: 20px 20px 10px -4px rgba(0, 0, 0, .3);
            }
            
        </style>
    </head>
    <body>
        <div></div>
 
        </p>
    </body>
</Html>

效果展示：
在这里插入图片描述

独钓寒江雪～

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html-2 盒子阴影

box-shadow 几个参数详解第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方第三个长度值代表了阴影的模糊半径,即模糊程度，可选第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小即阴影一圈的大小第五个参数 color 部分的
复制链接

扫一扫