文章/答案/技术大牛

发布

css边框粗细

CSS 边框粗细基础概念

CSS（层叠样式表）中的边框（border）属性用于设置元素的边框样式、宽度和颜色。边框粗细（border-width）是边框属性的一部分，用于定义边框的厚度。

类型

CSS 边框粗细有以下几种类型：

thin：细边框，默认值约为 1px。
medium：中等边框，默认值约为 3px。
thick：粗边框，默认值约为 5px。
具体数值：可以使用像素（px）、点（pt）、英寸（in）等单位指定具体的数值。

应用场景

按钮设计：通过调整按钮边框的粗细，可以增强按钮的视觉效果，使其更加突出。
卡片布局：在卡片布局中，使用不同粗细的边框可以区分不同的卡片或层次结构。
表格设计：在表格中使用边框可以清晰地分隔单元格，提高表格的可读性。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 边框粗细示例</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            border: 5px solid #333; /* 设置边框粗细为 5px */
        }
        .button {
            padding: 10px 20px;
            border: 2px solid #007bff; /* 设置边框粗细为 2px */
            background-color: #fff;
            color: #007bff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button class="button">点击我</button>
</body>
</html>

遇到的问题及解决方法

问题：边框没有显示

原因：

没有正确设置边框属性。
边框颜色与背景颜色相同，导致边框不可见。

解决方法：

确保设置了 border-width、border-style 和 border-color。
检查边框颜色是否与背景颜色相同，可以尝试使用不同的颜色。

.box {
    border: 2px solid #000; /* 确保设置了边框宽度、样式和颜色 */
}

问题：边框在不同设备上显示不一致

原因：

不同设备的像素密度不同，导致边框显示不一致。

解决方法：

使用 border-width 的具体数值，而不是相对单位（如 thin、medium）。
使用 rem 或 em 单位，以便在不同设备上保持一致的视觉效果。

.box {
    border: 2rem solid #000; /* 使用 rem 单位 */
}

参考链接

页面内容是否对你有帮助？

有帮助

没帮助

HTML:如何使表单元格边框向内增长

javascript、html

在Javascript程序中(不允许CSS，所有样式都在Javascript中完成)。但是当单元格被“选中”时，单元格的宽度和高度会扩大，这使得表格看起来像是每次选择单元格时都在移动。

浏览 20提问于2018-02-06得票数 6

回答已采纳

2回答

如何避免在iphone的bootstrap输入字段中出现额外的边框顶部粗细？

html、css

我在一个表单上使用了bootstrap输入字段，但是在iphone上发现了不必要的边框顶线粗细。css代码如下： .form-group .form-control { border: 1px solid #dddddd; box-shadow: none;有没有办法在iphone中去掉这种边框顶部的粗细？感谢所有对此的反馈。

浏览 32提问于2019-02-19得票数 5

回答已采纳

1回答

带有一个响应面的css三角形

css

问题是，我需要与固定高度(50px)的css三角形被拉伸在100%宽度的div。当然，它可以通过js或jquery完成，或者用svg替换，但是有没有纯css的解决方案呢？

浏览 13提问于2016-09-12得票数 0

回答已采纳

2回答

asp.net表格控件中的列边框

asp.net

我有一个表格控件，在其中我只需要在列之间放置可见的边框。我不需要其他任何地方的边界。有没有办法做到这一点?如果有，如何做到？提前感谢

浏览 4提问于2012-03-25得票数 0

1回答

JBorder显示不正确

java、swing、jpanel、awt、jlabel

创建组件时，边框是默认边框。当我单击组件时，我将边框设置为不同的粗细，以生成选定的外观。当我想取消选择并将边框设置为另一个粗细时，问题就来了。这一次，边框没有修改，看起来是一样的。我看不出有什么问题，因为第一次修改边框粗细的效果很好。

浏览 7提问于2013-07-08得票数 0

2回答

WPF网格上的下边框

c#、wpf、border、wpf-grid

我想在网格中的每一行设置一个底部边框，但只能找到如何在每个单元格周围放置所有4个边框。" /> </Grid.ColumnDefinitions>对于我正在使用的另一个需要所有四个边框的网格

浏览 5提问于2010-09-12得票数 45

回答已采纳

1回答

如何用SkiaSharp绘制复杂的圆形边框

c#、skiasharp

我想画复杂的圆形边框和带阴影的圆形矩形，但我找不到方法。我想自然地绘制一个框边框，就像浏览器CSS边框元素一样。我该怎么办？border-bottom: 9px solid #0f0; 如何绘制边框路径，我不知道如何平滑地改变路径的粗细和颜色，用DrawLine和DrawArc组合绘制并不能平滑地改变粗细。

浏览 14提问于2020-04-05得票数 0

1回答

如何提高dpi/分辨率pdfkit

ruby-on-rails、wkhtmltopdf、pdfkit

唯一的问题是线条粗细。源码html上的边框看起来很棒，pdf生成的边框看起来要厚很多。有什么办法解决这个问题吗？

浏览 2提问于2013-11-01得票数 3

4回答

CSS双边框，外边框比内边框粗

css

边框风格: double；实现这一点，但是我的客户希望外边框更粗&内边框为正常粗细。除了创建2个div之外，1个嵌套在另一个div中，外部div具有更大的厚度，或者通过使用边框图像，有没有什么方法可以用CSS只用1个div就能做到呢？指定border-style: double；，并且仍然可以使外边框更粗。

浏览 4提问于2010-11-15得票数 29

回答已采纳

1回答

mpg, hp)) + geom_point() + theme_bw()如果我现在在Adobe Illustrator中打开它，并使用直接选择工具选择面板边框，我可以看到这个边框没有颜色，没有填充，也没有描边粗细(见下文)，即使它们是在theme_bw()中指定的。如果我现在在Illustrator中删除这个“对象”，正确的面板边框终于出现了。你可以在下面的图片中看到面板边框现在有了在theme_bw()中指定的填充，颜色和笔触

浏览 1提问于2017-04-23得票数 0

3回答

jQuery .css有时无法工作

javascript、jquery、html、css

我如何修复jQuery函数".css“的问题，该函数只有在用户(控制台、按钮等)触发时才起作用？ { $(".circle").css

浏览 2提问于2014-05-09得票数 0

2回答

如何在XAML中单独设计边框

xaml

如何在XAMl中设计上、左、右或下边框？在CSS中，可以使用Border Top：...

浏览 0提问于2009-08-03得票数 29

回答已采纳

3回答

在不更改线型/粗细的情况下更改范围的边框颜色

vba、excel

我有一个格式良好的单元格区域，具有不同的边框线粗细(其中一些是中等粗细的，有些是细的，没有特定的模式)。我想运行一个宏，将边框的颜色更改为灰色，但每次执行此操作时，它都会自动将所有边框的权重更改为xlThin。我想保持原来的线条粗细，这样我就不需要再把各自的线条改回xlMedium了，这样做会很繁琐。

浏览 3提问于2017-01-03得票数 2

回答已采纳

2回答

使用简单代码的jquery问题

jquery

"#web").val(); $("#name").css("border-color","red"); $("#email").css("border-color","

浏览 0提问于2010-04-25得票数 1

回答已采纳

3回答

如何创建在所有浏览器上看起来都一样的虚线边框？

html、css、border、css-shapes

我可以创建一个CSS虚线边框，如下所示，但是如何制作顶部和侧面边框呢？是的，border: dashed可以做到这一点，但问题是，在Chrome，IE，FF等浏览器中，破折号呈现方式不同，所以我正在寻找一种通用的跨浏览器样式声明，可以控制破折号的粗细，以及间距和长度，并从下面的一个边框开始HTML：CSS： height:95px; margin-top:

浏览 1提问于2015-07-09得票数 2

1回答

引导CSS未应用于表td

css、twitter-bootstrap、html-table

使用内联样式进行更改的效果与预期一致：但是，当我尝试将其添加到bootstrap.css文件中时，应用了字体粗细，但顶部边框没有：CSS (也尝试过'!important‘)： border-top:none;} 有什么建议说明为什么它可以内联工作，而

浏览 1提问于2013-07-13得票数 1

回答已采纳

2回答

WinForm周围较厚的边框(FixedSingle) - VB.NET

vb.net、visual-studio

在主窗体上，我尝试增加边框的粗细和/或颜色。然而，通过谷歌我只能找到增加面板边框厚度的方法，或者当FormBorderStyle设置为None时。许多答案似乎也与C#有关。此时，表单的FormBorderStyle设置为FixedSingle 我只是想知道，在VB.NET中，是否有一种方法可以改变外边框的粗细，或者改变与FixedSingle样式相关的属性？

浏览 29提问于2020-12-29得票数 0

回答已采纳

1回答