解决svelte-dnd-action中拖拽元素出现白色边框的问题

在使用svelte-dnd-action库进行拖拽操作时，开发者可能会遇到拖拽元素周围出现白色边框的情况。这个现象其实是由浏览器默认行为引起的，而非库本身添加的样式效果。

当用户开始拖拽操作时，浏览器会自动为当前获得焦点的元素添加轮廓线(outline)，这与使用键盘Tab键切换焦点时看到的轮廓线是相同的机制。这种设计是浏览器为了辅助功能(accessibility)考虑而实现的默认行为。

要移除这个白色边框，可以通过CSS样式覆盖浏览器的默认行为。最直接的方法是使用以下CSS规则：

*:focus {
    outline: none;
}

这个解决方案需要注意几点：

1. 使用:global包装器确保样式能应用到所有元素
2. 移除焦点轮廓可能会影响网站的可访问性，建议仅针对拖拽场景使用
3. 如果必须保留部分元素的焦点轮廓，可以使用更具体的选择器

对于使用TailwindCSS的项目，虽然outline-none类通常可以解决类似问题，但在拖拽场景下可能不会生效，因为浏览器在拖拽时添加的轮廓线优先级较高。

在实际项目中，建议采用更精细的样式控制，例如只为拖拽容器添加无轮廓样式，而不是全局移除所有焦点轮廓，以保持良好的可访问性。