如何使用CSS创建适配WhatsApp图标的形状边框以实现发光效果？

解决方案 #

你遇到的核心问题有两个：

1. 普通CSS border+圆角的方案没法匹配WhatsApp图标左下角带尖角的气泡外形，且box-shadow是给元素整体加矩形阴影，不会贴合SVG的透明轮廓
2. 你写的hover选择器语法有误，且当前SVG标签为空，缺少图标路径

步骤1：补全完整的WhatsApp SVG图标代码

你用的是Bootstrap的bi-whatsapp图标，补全路径后的完整代码如下：

<button class="btn">
  <li class="li3">
    <a href="http://wa.me/+917226072534" target="_blank">
      <svg class="svg3" xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" color="rgb(0, 190, 0)" class="bi bi-whatsapp" viewBox="0 0 16 16">
        <path d="M13.601 2.384A7.958 7.958 0 0 0 8.018 0C3.717 0 .233 3.487.233 7.786c0 1.37.357 2.706 1.032 3.889L0 16l4.443-1.155a7.93 7.93 0 0 0 3.574.854h.002c4.301 0 7.784-3.487 7.784-7.785a7.767 7.767 0 0 0-2.432-5.53zM8.02 14.127a6.1 6.1 0 0 1-3.294-.966l-.262-.155-2.608.678.69-2.538-.17-.276a6.087 6.087 0 0 1-.94-3.11c0-3.364 2.744-6.095 6.105-6.095 1.633 0 3.168.633 4.317 1.782a6.042 6.042 0 0 1 1.789 4.312c.001 3.365-2.743 6.096-6.107 6.096zm3.393-4.638c-.186-.093-1.104-.544-1.273-.607-.168-.063-.291-.094-.414.094-.124.187-.479.606-.587.731-.109.125-.217.14-.402.047-.186-.094-.785-.289-1.493-.92-.551-.496-.922-1.11-1.03-1.297-.108-.187-.012-.288.082-.381.084-.084.187-.218.28-.327.093-.109.124-.187.186-.311.062-.125.031-.234-.016-.328-.047-.093-.417-1.002-.572-1.373-.152-.362-.307-.313-.418-.319-.108-.006-.232-.007-.356-.007-.124 0-.326.047-.496.234-.17.187-.647.632-.647 1.543 0 .912.663 1.793.756 1.917.093.124 1.307 1.993 3.165 2.797.443.191.789.305 1.061.39.446.138.85.118 1.172.072.358-.053 1.104-.451 1.259-.886.156-.436.156-.809.109-.886-.047-.078-.173-.125-.359-.218z"/>
      </svg>
    </a>
  </li>
</button>

步骤2：修改CSS样式

• 用SVG自带的stroke属性做和图标外形完全一致的描边边框
• 用filter: drop-shadow()替代box-shadow，实现贴合图标轮廓的发光效果
• 修正hover选择器的语法错误

/* 基础SVG样式 */
.svg3 {
  /* 描边边框，完全贴合图标路径 */
  stroke: green;
  stroke-width: 0.5px;
  transition: all 0.2s ease;
}

/* Hover样式 */
.li3 a:hover .svg3 {
  color: rgba(150, 255, 0, 1);
  stroke: rgba(150, 255, 0, 1);
  /* 贴合外形的发光效果 */
  filter: drop-shadow(0 0 15px rgba(200, 255, 0, 0.8));
}

修改完成后就能得到和图标外形完全一致的边框和发光效果。

内容的提问来源于stack exchange，提问作者Ammar Kapasi