在这个按钮上出现一个阴影,看起来像是另一个按钮的边框。我试图使用box-shadow属性,但失败了。
html - 如何在这样的按钮中给阴影?-LMLPHP
我用了这个CSS

a {
  padding: 10px 40px;
  border-radius: 30px;
  font-size: 18px;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 5px 5px 0px #2CBFBB;
}

有人能帮我吗?

最佳答案

基于chazsolo's answer。使用绝对定位的伪元素和CSS属性继承,可以在按钮上获取阴影而不在文本上显示阴影:

body {
  background: #76d7c4;
}

button {
  text-transform: uppercase;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  background: transparent; /* no background! */
  border: 1px solid white;
  border-radius: 100px;

  position: relative; /* new */
}

button:after {
  content: "";
  position: absolute;
  /* Making pseudoelement the same size as container */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* Inheriting border properties */
  border-radius: inherit;
  border: inherit;
  /* Applying filter with shadow */
  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}

<button>Learn More</button>

10-08 13:58
查看更多