Question

是否有可能以某种方式在CSS中创建双边框，并添加了以下2个自定义项：

一条线比另一条线稍厚一些
两行之间有一个小差距

这是我需要的那种边框：

enter image description here

修改

伙计们，我无法对我现有的HTML代码进行任何更改。我只能为现有HTML代码应用CSS。就你而言，考虑我有一个名为sampleDiv的div，我想在这个div的顶部应用边框（见下文）。

其次，如果您使用border以外的任何技术，请注意我仅想要在顶部上应用此专用边框我的sampleDiv div。

Answer 1

纯粹的CSS＆amp;跨浏览器 - 可以自定义厚度和间距

在您最新的修改后：这是Working Fiddle

不改变标记，仅限顶部边框。

您的HTML：

<div class="sampleDiv">
    some content
</div>

新CSS

.sampleDiv
{
    border-top: 2px solid black;
    padding-top: 1px;
}
.sampleDiv:before
{
    content: '';
    border-top: 1px solid black;
    display: block;
    width: 100%;
}

如果您允许更改DOM：

标记中的任意位置：Working Fiddle

<强> HTML：

<div class="SpecialLine"></div>

<强> CSS：

.SpecialLine
{
    border-top: 2px solid black;
    height: 2px;
    border-bottom: 1px solid black;
}

完整的容器边框：Working Fiddle

<强> HTML：

<div class="SpecialContainer">
    <div class="Content">
        here goes the content
    <div>
</div>

<强> CSS

.SpecialContainer
{
    border: 2px solid black;
    padding: 1px;
}

.Content
{
    border: 1px solid black;
}

Answer 2

您可以通过多种方式拥有多个边框。一种方法是使用box-shadow，您可以指定多个框阴影来创建所需的效果。

示例

box-shadow: 0 0 0 5px black, 0 0 0 7px red;

更新

我创建了一个jsFiddle来向您展示如何使用box-shadow
创建边框
Fiddle

Answer 3

没有特定的属性或类似的东西，但你可以很容易地创建一个。这样的东西：

html:
<div id="wrapper">
    <div id="middle">put whatever you want here</div>
</div>

css:
#wrapper{
border: 3px solid black;
padding: 1px;
}

#middle{
border: 1px solid black;
}

这是一个js小提琴链接： http://jsfiddle.net/roostaamir/GEqLJ/

更新：所以我看到了你的编辑，这是我想到的第一件事（如果你有sampleDiv的宽度，这将有效：

#sampleDiv
{
border-top: 3px solid black;
width: 500px; //this is an example
position: relative;
}

#sampleDiv:before
{
content: "";
display: block;
position: absolute;
top: 1px;
width: 500px;
height: 1px;
background-color: black;
}

Answer 4

你的div：<div class="framed" />

简单的CSS：

.framed {
    border: solid 2px #ccc;
    box-shadow: 0 0 0 14px #ccc;
    outline: solid 8px #fff;
}

演示小提琴：http://jsfiddle.net/uRFsD/

Answer 5

据我所知，不是纯CSS。相反，您可以在HTML中添加div元素，将其宽度设置为低于它的宽度，并将其设置为border-top，thickness，margin属性，以满足更厚的边框要求。

Answer 6

最简单的方法是将主div包装在第二行的容器div中，如下所示：

.inner {
    border: 2px solid #000;
}

.outer {
    border: 1px solid #000;
    padding: 1px;
}

它不是特别语义，但它是完成工作的简单方法。如果语义很重要，你也可以使用border-image，但它更复杂。我猜你也可以在同一个div上同时使用border（内部）和outline（外部），但这并不理想，因为概要在技术上并不是盒子模型的一部分据我所知。

Answer 7

HTML

<div></div>
<div></div>

CSS：

div{
  display: block;
  background-color: #000;
}
div:nth-child(1){
  padding: 2px 0;
}
div:nth-child(2){
  margin-top: 1px;
  padding: 1px 0;
}

Check this fiddle

Answer 8

可能如下所示：

div {
    border-top: 3px solid #00f;
    position: relative;
    z-index: 10;
    margin: 10px;
    width: 200px;
}

div:before {
    content: "";
    border-top: 1px solid #f00;
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    z-index: -1;
}

http://jsbin.com/iWiGEzU/1/edit?html,css,output

Answer 9

喜欢

<强> demo

<强> CSS

.outline {
    border-top: 2px solid #000;
    border-bottom:1px solid #000;
    height:3px;

}

Answer 10

CSS

.doubleBorder
{
    border: 4px solid black;
    padding: 2px;
}

.doubleBorder>div {
    border: 2px solid black;
}

HTML

<div class="doubleBorder">
    <div>
        <p>Hello</p>
        <p>World</p>
    </div>
</div>

Working demo

CSS中的双边框，中间有间隙？

10 个答案:

更新

CSS

HTML