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

本文探讨了CSS中边框不支持百分比宽度的问题,并提供了两种解决方案:一种是非脚本方法,通过设置包装元素的背景颜色和填充百分比来模拟百分比边框;另一种是脚本方法,使用JavaScript动态计算并调整边框宽度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

由于其他人已指向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元素似乎更简单,因为它会在这些情况下自动调整宽度。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值