css制作圆角按钮和卡片阴影效果

最新推荐文章于 2024-06-21 11:27:52 发布

大鱼吃小鱼7

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量2.9k

点赞数

分类专栏：深入了解css css世界文章标签：圆角卡片 css

本文链接：https://blog.csdn.net/qq_37210523/article/details/103023178

版权

深入了解css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css世界

7 篇文章 1 订阅

订阅专栏

效果:
在这里插入图片描述
代码:

button{
     width: 100px;
     margin: 10px;
     margin-bottom: 0;
     height: 37px;
     background: #fff;
     color: #506AE7;
     text-shadow: 1px 1px 1px rgba(255,255,255, .1);
     border-radius: 30px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     transition: all 0.15s ease;
  }
.selected{
     background: #242CD9;
     color: #fff;
 }