5

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

  1. 一条线比另一条线稍粗
  2. 两条线之间有一个小间隙

这是我需要的那种边框：

在此处输入图像描述

编辑：

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

其次，如果您使用除 之外的任何技术border，请注意我只想在div的顶部应用这个专门的边框。sampleDiv

4

10 回答 10

8

纯 CSS 和跨浏览器 - 可以自定义粗细和间距

在你最新的编辑之后：这是一个工作小提琴

不更改标记，仅顶部边框。

你的 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;
}
于 2013-09-20T13:04:13.133 回答
5

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

例子

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

更新

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

小提琴

于 2013-09-20T13:06:39.713 回答
2

没有特定的属性或其他东西，但您可以轻松创建一个。像这样的东西：

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;
}
于 2013-09-20T13:07:25.140 回答
1

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

简单的 CSS：

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

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

于 2013-09-20T13:10:29.090 回答
0

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;
}

检查这个小提琴

于 2013-09-20T13:07:45.750 回答
0

可能如下所示：

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,输出

于 2013-09-20T13:08:15.913 回答
0

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

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

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

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

于 2013-09-20T13:06:28.900 回答
0

喜欢

演示

css

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

}
于 2013-09-20T13:10:51.250 回答
0

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>

工作演示

于 2013-09-20T13:11:02.387 回答
0

据我所知，不是纯CSS。相反，您可以在 HTML 中添加一个 div 元素，将其宽度设置为其下方的宽度，并将其边框顶部、厚度、边距属性设置为满足您对较粗边框的要求。

于 2013-09-20T13:04:58.347 回答