css - 带阴影的 CSS 空心圆

Question

我有一个很好的红色发光效果，但只在按钮的文本上，而不是在边框上：

body{
 background: black;
}
.delete-button-container{
      height: 30px;
      width: 30px;
      padding: 3px 0 0 3px;
}
    
.delete-button{
    height: 24px;
    width: 24px;
    font-size: large;
    line-height: 20px;
    text-align: center;
    color: #ffffff;
    border-radius: 100%;
    border: 2px solid #ffffff;
    text-shadow: 0 0 3px rgba(255, 50, 50, 1),
      0 0 3px rgba(255, 50, 50, 1),
      0 0 6px rgba(255, 50, 50, 1),
      0 0 6px rgba(255, 50, 50, 1),
      0 0 7px rgba(255, 50, 50, 1);
}
      

<div class="delete-button-container">
   <div class="delete-button">X</div>
</div>

我是否没有其他选择为此创建自己的 png 并对其应用阴影，或者是否有将阴影应用到边框的技巧？

标签： csssass

Answer 1

我有一个很好的红色发光效果，但只在按钮的文本上，而不是在边框上

将相同的值应用于box-shadow属性有什么问题？

结果

body {
  background: black;
}

.delete-button-container {
  height: 30px;
  width: 30px;
  padding: 3px 0 0 3px;
}

.delete-button {
  height: 24px;
  width: 24px;
  font-size: large;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  border-radius: 100%;
  border: 2px solid #ffffff;
  text-shadow: 0 0 3px rgba(255, 50, 50, 1), 0 0 3px rgba(255, 50, 50, 1), 0 0 6px rgba(255, 50, 50, 1), 0 0 6px rgba(255, 50, 50, 1), 0 0 7px rgba(255, 50, 50, 1);
  box-shadow: 0 0 3px rgba(255, 50, 50, 1), 0 0 3px rgba(255, 50, 50, 1), 0 0 6px rgba(255, 50, 50, 1), 0 0 6px rgba(255, 50, 50, 1), 0 0 7px rgba(255, 50, 50, 1);
}

<div class="delete-button-container">
  <div class="delete-button">X</div>
</div>