CSS给按钮加弥散阴影的效果

709 阅读1分钟

button {

    width: 112px;

    height: 34px;

    border: none;

    border-radius: 8px;

    background: linear-gradient(

      270deg,

      rgba(241, 187, 73, 1) 0%,

      rgba(241, 154, 73, 1) 44%,

      rgba(241, 131, 73, 1) 100%

    );

    color: #fff;

    cursor: pointer;

  }

  button:before {

    content: '';

    position: absolute;

    z-index: -1;

    left: 0;

    bottom: 0;

    display: inline-block;

    width: 100%;

    height: 34px;

    border-radius: 8px;

    background: inherit;

    filter: blur(3px) brightness(0.95);

  }

过程中遇到一点问题,由于最外面的盒子position: relative;会影响阴影效果的定位,可以用transform来解决。