css中box-shadow的用法总结

最新推荐文章于 2024-07-26 08:45:03 发布

幸福滴嘴角上扬

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量601

点赞数

分类专栏： CSS 文章标签： CSS box-shadow

本文链接：https://blog.csdn.net/xiangxiangw29/article/details/52948496

版权

CSS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

闲来无事，整理下文件夹，发现一个很久前的box-shadow文件夹，现在就总结下box-shadow的用法。

.top-right{
width: 150px;
height: 80px;
background-color: green;
box-shadow: 4px 4px 4px salmon;
}
.top{
width: 150px;
height: 80px;
background-color: green;
box-shadow: 0px -4px 4px salmon;
}
.left{
width: 150px;
height: 80px;
background-color: green;
box-shadow: -4px 0px 4px salmon;
}
.range{
width: 150px;
height: 80px;
background-color: green;
box-shadow: 4px 4px 4px salmon,-4px 0px 4px salmon,0px -4px 4px salmon;
}

<div class="con">
<p class="top-right">box-shadow:</br>正值  正值  阴影 颜色</p>
<p class="top">box-shadow:</br>0  负值  阴影 颜色</p>
<p class="left">box-shadow:</br>0  负值  阴影 颜色</p>
<p class="range">box-shadow:</br>0  负值  阴影 颜色</p>
</div>