html里设置边框的厚度,css – 如何设置边框的厚度百分比？

边框不支持百分比…但它仍然可能…

由于其他人已指向CSS specification，边界不支持百分比：

'border-top-width',

'border-right-width',

'border-bottom-width',

'border-left-width'

Value: | inherit

Initial: medium

Applies to: all elements

Inherited: no

Percentages: N/A

Media: visual

Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

你可以see它说百分比：N / A。

非脚本解决方案

您可以使用包装元素模拟百分比边框，其中：

>将包装元素的背景颜色设置为所需的边框颜色

>设置包装元素的填充百分比(因为它们是支持的)

>将您的元素背景颜色设置为白色(或任何需要的)

这将以某种方式模拟你的百分比边界。 Here’s an example使用此技术的25％宽度边框的元素。

示例中使用的HTML

.faux-borders {

background-color: #f00;

padding: 1px 25%; /* set padding to simulate border */

}

.content {

background-color: #fff;

}

This is the element to have percentage borders.

问题：你必须知道，当你的元素应用了一些复杂的背景时，这将更加复杂…特别是如果那个背景是继承自祖先DOM层次结构。但是如果你的UI很简单，你可以这样做。

脚本解决方案

var el = $(".content");

var w = el.width() / 4 | 0; // calculate & trim decimals

el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

This is the element to have percentage borders.

但你必须知道，你将不得不每次你的容器大小改变(即浏览器窗口调整大小)调整边框宽度。我的第一个解决方法与wrapper元素似乎更简单，因为它会在这些情况下自动调整宽度。

脚本解决方案的积极方面是它不会遇到在我以前的非脚本解决方案中提到的背景问题。