box-shadow

u014378108

已于 2023-12-20 13:42:35 修改

阅读量411

点赞数 9

分类专栏： css 文章标签：前端 css3

于 2023-12-20 11:31:14 首次发布

本文链接：https://blog.csdn.net/u014378108/article/details/135102684

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

h-shadow 水平阴影的位置，必须填写，可以为负值
v-shadow 垂直阴影的位置，必须填写，可以为负值
blur 可选，模糊距离
spread 可选，阴影的外延值
color 可选，阴影的颜色
inset 可选，将外部阴影改为内部阴影

只设置外延 spread

水平方向移动5px

水平方向移动115px

spread:5px,在box的大小上往四周延申5px铺在box背后

border: 1px solid red;
background-color: #eee;
box-shadow: 0 0px 5px 0px blue;

border:1px

spread:0; 蓝色块躲在灰色块后面

blur:5px ;模糊距离5px

width: 50px;
height: 50px;
padding: 20px;
border: 1px solid red;
background-color: #eee;
box-shadow: 0 0px 5px 3px blue;

box-shadow: 0 0px 8px 0px blue;

spread:0;

blue:8px 与上图 spread:3px blue5px 对比

box-shadow: 5px 5px 0 5px blue;

box-shadow: 30px 5px 0 5px blue inset;

box-shadow: 0 0px 0 5px #fff700 inset;

inset spread:5px

box-shadow: 0 0px 35px 5px #0079ff inset;

inset blur 调大中间圆形效果

鼠标hover 显示box-shadow效果

<style>
    .box{
        border:1px solid #333;
        width: 80px;
        height: 80px;
        background-color: #eee;

        top:0;
        position: relative;


    }
    .box:hover{
        top:10px;
        transition: linear 0.5s;
        box-shadow: 2px 2px 5px 3px #ccc;

    }
</style>
<body>
   <div class="box">
   </div>



</body>