在制作网站或者应用时，前端开发者通常会使用 CSS Reset，以便消除浏览器默认样式造成的问题，使页面在不同浏览器上具有一致的外观。然而，在 CSS Reset 应用之后，许多元素将会失去它们原有的边框。在本文中，我们将讨论如何在 CSS Reset 后为元素添加边框，并提供一些详细的代码示例和说明。
CSS Reset 是什么？
CSS Reset 是为解决浏览器兼容性问题而存在的一种 CSS 预设样式。它的作用是在页面渲染之前消除不同浏览器的默认样式，并将所有元素的样式归零。CSS Reset 的目的是提供一致的外观，使得不同浏览器下的页面具有可预见的表现形式。
CSS Reset 的影响
尽管 CSS Reset 解决了一个很大的问题，但它也带来了新的问题：在应用 CSS Reset 后，大多数元素都失去了它们原本的边框。这种情况可能给页面带来一些问题，让视觉上的元素混乱不堪，导致用户体验下降。
增加元素边框的方式
在 CSS Reset 后，可以通过多种方式为元素添加边框。在本节中，我们将介绍其中的三种方法。
1. 使用 border 属性
最简单的方法是使用 border 属性为元素添加边框。border 属性可以产生一个包含样式、宽度和颜色的元素边框。下面的代码片段演示了如何为一个文本输入框添加边框：
input[type="text"] {
border: 1px solid black;
}在这个 example 中，我们将为所有 input 元素类型为文本（type="text"）添加一个 1 像素的黑色实线边框。
2. 使用 outline 属性
outline 属性可以在元素周围添加一条线，类似于边框，但是与边框不同，outline 不会占用元素的空间。同样以文本输入框为例，下面的代码片段演示了如何使用 outline 属性为元素添加边框：
input[type="text"] {
outline: 1px solid black;
}在这个 example 中，我们将为所有 input 元素类型为文本（type="text"）添加一个 1 像素的黑色实线 outline。
3. 使用伪元素
最后一种方式是使用伪元素为元素添加边框。伪元素是在元素的内容之前或之后创建的虚拟元素。因此，我们可以创建一个为元素周围添加边框的伪元素。
下面的代码片段演示了如何使用伪元素为元素添加边框：
-- -------------------- ---- ------- --- - --------- --------- - ----------- - -------- --- --------- --------- ---- ----- ----- ----- ------ ----- ------- ----- ------- --- ----- ------ -
在这个 example 中，我们首先将 div 元素的定位类型设为相对定位，然后创建一个 ::before 伪元素。伪元素的 content 属性设为空，这意味着它不会显示任何内容。接下来，我们将伪元素的位置设置为覆盖整个 div 元素，并为它添加一个像素的黑色实线边框。
总结
在使用 CSS Reset 时，一些元素会失去它们原来的边框。幸运的是，向页面元素添加边框有多种方法，包括使用 border 和 outline 属性，以及使用 ::before 或 ::after 伪元素。选择哪种方法，取决于具体情况和个人偏好。无论你选择哪种方法，都要确保它能够为你的网站或应用程序提供最佳的视觉效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0bd18f6b2d6eab3bf3e07