CSS 边框可以指定百分比吗？

CSS 边框厚度百分比：可能吗？

问题：

在尝试创建带边框的元素时覆盖浏览器窗口的指定百分比，您尝试使用 border-width:10%;，但失败了。有没有办法在 CSS 中使用百分比设置边框粗细？

答案：

边框不支持百分比...但仍然可以。 ..

根据 CSS 规范，边框不支持百分比宽度：

边框宽度

值

百分比

边框-顶部宽度

`

继承`

border-width	Value	Percentages
border-top-width	`	inherit`	N/A

不适用

非脚本解决方案：

由于 CSS 边框不支持百分比，请考虑使用包装元素来模拟边框：

1. 将包装的背景颜色设置为您想要的边框颜色。
2. 在包装元素上使用百分比填充，而不是边框​​宽度。
3. 设置将元素的背景颜色更改为所需的内容颜色。

此技术使用填充来模拟百分比边框。

示例：

创建25%宽度的侧边框使用这个方法：

HTML：

<div class="faux-borders">
  <div class="content">
    This is the element to have percentage borders.
  </div>
</div>

CSS：

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

以上是CSS 边框可以指定百分比吗？的详细内容。更多信息请关注PHP中文网其他相关文章！