CSS编写元素内阴影样式

最新推荐文章于 2024-01-11 07:54:28 发布

小糖豆豆豆豆

最新推荐文章于 2024-01-11 07:54:28 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42865522/article/details/86495776

版权

css样式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div class="getCoin">
    立即领取
</div>

.getCoin {
  text-align: center;
  width: 60vw;
  height: 0.8rem;
  line-height: 0.8rem;
  background: rgba(254, 236, 78, 1);
  box-shadow: -0.02rem 0.06rem 0.51rem 0rem rgba(237, 60, 20, 0.4) inset,
    0rem -0.08rem 0.24rem 0rem rgba(253, 29, 29, 0.32) inset;
    // 第一个参数为阴影距border-left的距离，第二个参数为阴影距border-top的距离，第三个参数为阴影模糊的距离，第四个参数为阴影比原来元素大的尺寸，颜色，inset将外阴影改为内阴影
  border-radius: 0.48rem;
  color: #720000;
  font-size: 0.3rem;
  font-weight: bold;
}