css3——阴影（立体感，层次效果），渐变色按钮

最新推荐文章于 2024-07-21 20:52:32 发布

0?0

最新推荐文章于 2024-07-21 20:52:32 发布

阅读量7.4k

点赞数

分类专栏： CSS 文章标签： css阴影

本文链接：https://blog.csdn.net/weixin_42301962/article/details/90058639

版权

本文介绍了如何使用CSS3的box-shadow属性创建立体感和层次效果的阴影，详细解析了语法，包括水平和垂直阴影位置、模糊距离、尺寸及颜色设置。同时，文章还探讨了如何运用CSS3实现从上到下和从左到右的渐变色按钮，为网页设计增添更多视觉魅力。

摘要由CSDN通过智能技术生成

box-shadow: 0px 0px 12px #97eaf9;
在这里插入图片描述
语法

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

h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。

从上到下渐变

 background: -moz-linear-gradient(top, #34dbfc 0%, #61a7fd 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#34dbfc), color-stop(100%,#61a7fd));
 background: -webkit-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -o-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: -ms-linear-gradient(top, #34dbfc 0%,#61a7fd 100%);
 background: linear-gradient(to bottom, #34dbfc 0%,#61a7fd 100%);

从左到右渐变