box-shadow

最新推荐文章于 2024-04-28 16:25:19 发布

CharlotteSuo

最新推荐文章于 2024-04-28 16:25:19 发布

阅读量483

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/CharlotteSuo/article/details/77646475

版权

2 篇文章 0 订阅

订阅专栏

之前看到过别人写的关于边框阴影的一些总结，感觉写的挺好，不过还是想有个自己的，哈哈

box-shadow:1px 1px 1px #eee;这四个属性分别代表垂直偏移、水平偏移、投影的宽度（模糊宽度）、颜色

1.阴影侧重上右：

<div style="width:100px;height:100px;background:#f9f5f5;box-shadow:1px 0px 5px #b7a7a7;margin:10px auto;"></div>

示例图：

2.阴影侧重右下：

<div style="width:100px;height:100px;background:#f9f5f5;box-shadow:1px 1px 5px #b7a7a7;margin:20px auto;"></div>

示例图：

3.阴影侧重右下左：

<div style="width:100px;height:100px;background:#f9f5f5;box-shadow:0px 1px 5px #b7a7a7;margin:20px auto;"></div>

只总结了三种用法，够我自己用的了，嗯。。

关注