border没反应主因是漏写border-style，因其默认值为none；三要素（宽、样式、色）缺一不可，如border: 1px #333❌不生效，须写成border: 1px solid #333✅或分写三属性。
直接用 border 就能加边框，但多数“没反应”或“线太粗/颜色不对”的问题，都出在漏写了 border-style 或被其他 CSS 覆盖了。
为什么加了 border: 1px #333 却没显示？
因为 border 是复合属性，必须包含宽度、样式、颜色三者——缺了 solid（或 dashed 等），浏览器默认 border-style: none，等于白写。
- 错误写法：
border: 1px #333;（缺样式） - 正确写法：
border: 1px solid #333;或分开写：border-width: 1px; border-style: solid; border-color: #333; - WooCommerce 主题常预设
.button的border: none，得用更高优先级覆盖，比如加!important或用更具体的选择器：.woocommerce a.button.add_to_cart_button
怎么让边框看起来更细或更精致？
真·1px 在高 DPI 屏幕上可能发虚，或和设计稿的“视觉细线”不一致。这时别硬调 border-width: 0.5px（不被所有浏览器支持），改用替代方案：
- 用
box-shadow模拟：例如box-shadow: 0 0 0 1px rgba(0,0,0,0.1);，它不占布局空间，缩放友好 - 只加某一边：比如只要下边框做分割感，写
border-bottom: 1px solid #eee;，比全边框更轻量 - 配合
background-clip: padding-box防止圆角时边框溢出（尤其border-radius> 0 时）
购物车按钮边框要兼顾可访问性
用户用键盘 Tab 切换焦点时，按钮必须有清晰轮廓。别只删 outline 了事：
- 保留
outline用于聚焦态：button:focus { outline: 2px solid #007bff; outline-offset: 0; } - 如果想统一视觉风格，可用
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);替代outline，它支持圆角且不影响布局 - 避免同时设
border和outline又不调outline-offset，否则会看到双线重叠
真正难的不是画出那条线，而是判断该用 border、box-shadow 还是 outline——取决于它承载的是视觉装饰、交互反馈，还是无障碍需求。同一按钮上这三者可能共存，但职责必须分明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
