css的阴影效果

最新推荐文章于 2024-01-09 09:39:01 发布

Blithe_Lee2

最新推荐文章于 2024-01-09 09:39:01 发布

阅读量296

点赞数

分类专栏： java web前后端文章标签： css阴影

本文链接：https://blog.csdn.net/qq_31469369/article/details/55260028

版权

java web前后端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

设置阴影效果 box-radius：x偏移 y偏移  [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；
[阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；

<html>
<head></head>
<style>
#main{
height:100px;
width:100px;
background:#666;
border-radius:50px 0 50px 0;
}
#second{
width:100px;
background:#453;
height:100px;
box-shadow: 10px 20px red;
}
</style>
<body >
<div id="main"></div>
<div id="second"></div>
</body>
</html>

效果：

多个阴影的话直接用逗号隔开：

吧上图再加上一个左上角的绿色阴影内嵌模式；

优惠劵

Blithe_Lee2

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的阴影效果

设置阴影效果 box-radius：x偏移 y偏移 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；[阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；<html><head></head><style>#main{height:100px;width:100px;background:#666;...
复制链接

扫一扫