如何移除通过box-shadow实现的图标容器右侧类边框？

当然可以移除右侧的类边框效果，只需要调整box-shadow的参数，把原来的四周灰色“边框”拆成左、上、下三个方向的独立阴影即可。

原代码里的第二个阴影项rgb(229, 231, 235) 0px 0px 0px 1px是给元素添加了一圈1px的灰色边框，我们把它替换成三个单独的阴影，分别覆盖左、上、下三个边，同时可以删掉第一个无效的白色阴影项（它的偏移和扩散都是0，没有实际效果）。

修改后的CSS代码如下：

box-shadow: rgb(229, 231, 235) -1px 0px 0px 1px,
            rgb(229, 231, 235) 0px -1px 0px 1px,
            rgb(229, 231, 235) 0px 1px 0px 1px,
            rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;

参数说明： #

• rgb(229, 231, 235) -1px 0px 0px 1px：生成左侧的灰色边框（水平偏移-1px，扩散半径1px）
• rgb(229, 231, 235) 0px -1px 0px 1px：生成顶部的灰色边框（垂直偏移-1px，扩散半径1px）
• rgb(229, 231, 235) 0px 1px 0px 1px：生成底部的灰色边框（垂直偏移1px，扩散半径1px）
• 最后一项保留原有的底部淡阴影效果

这样修改后，元素的右侧就不会有类边框，其他三个边的样式和底部阴影都能保留。

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