html边框粗细设置,如何设置百分比的边框粗细？

边框不支持百分比...但仍有可能...

正如其他人指出的CSS规范，边框不支持百分比：

'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'

正如你可以看到它说百分比：N / A。

非脚本解决方案

您可以使用包装器元素模拟百分比边界，您可以在其中进行以下操作：

将包装器元素设置background-color为所需的边框颜色

设置包装元素的padding百分比(因为它们受支持)

将您的元素设置background-color为白色(或任何需要的颜色)

这将以某种方式模拟您的百分比边界。这是使用此技术的具有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层次结构继承而来的。但是，如果您的用户界面足够简单，则可以采用这种方式。

脚本解决方案

@BoltClock提到了脚本解决方案，您可以在其中以编程方式根据元素大小计算边框宽度。

这是一个使用jQuery非常简单的脚本的示例。

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元素的第一个解决方法似乎要简单得多，因为它会在这些情况下自动调整宽度。

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

html边框粗细设置,如何设置百分比的边框粗细？相关推荐

CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
html边框设置为背景同色,css边框与背景
1.半透明边框默认情况下,背景会延伸到边框所在的区域下层.可以通过background-clip 属性来调整.这个属性的初始值是border-box,意味着背景会被元素的border-box(边框的 ...
html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
Winform中对ZedGraph的曲线标签进行设置，比如去掉标签边框
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
corners边框_安卓中设置(shape)圆角背景和边框(stroke)相关的问题
最近开发的项目中使用的圆角背景和边框比较多,基本都是使用shape文件和.9图片实现的.但在实现的过程中也是会出现一些小问题,这篇随笔会总结下来其中遇到的问题. 一,圆角大小不一致 1,四周圆角都为1 ...
html图片与周围元素边界5px,css3如何将图像设置为元素周围的边框
css3将图像设置为元素周围的边框的方法:首先创建一个HTML示例文件:然后在body中创建一些p元素:最后通过css3中的border-image属性将图像设置为元素周围的边框即可. 本文操作环境: ...
html th不显示下边框,css怎么设置不显示table的边框？
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. css可以通过border属性设置table的边框,可以通过设置border属性 ...
css 下边框 90%,css怎么设置下边框
css设置下边框的方法:首先新建一个html文件:然后使用div标签创建一个模块:接着给div标签添加一个id属性:最后使用border-bottom属性设置div的下边框即可. 本文操作环境:win ...
qt widget设置边框_Qt开源作品16-通用无边框拖动拉伸
## 一.前言相信各位CS结构开发的程序员,多多少少都遇到过需要美化界面的事情,一般都不会采用系统的标题栏,这样就需要无边框标题栏窗体,默认的话无边框的标题栏都不支持拉伸和拖动的,毕竟去掉了标题栏则 ...
html给input添加边框,html input怎么设置虚线边框样式
html input设置虚线边框的方法:在input标签中使用style属性,添加"border-style: dashed;"或者"border:宽度值 dashed ...

html边框粗细设置,如何设置百分比的边框粗细？

html边框粗细设置,如何设置百分比的边框粗细？相关推荐

最新文章

热门文章