Html CSS插入边框

我需要创建一个纯色镶嵌边框。这是我正在使用的CSS的一部分：

border: 10px inset rgba(51,153,0,0.65);

---

不幸的是，这会创建一个3D脊状边框（忽略正方形和黑色描述框）

您可以使用

框阴影，可能：

什么{
背景：透明url(https://i.stack.imgur.com/RL5UH.png)50%50%不重复；
最小宽度：300px；
最小高度：300px；
框阴影：插入0 10px#0f0；
}

什么{ 背景：透明url(https://i.stack.imgur.com/RL5UH.png)50%50%不重复； 最小宽度：300px； 最小高度：300px； 框阴影：插入0 10px#0f0； }

---

我不知道你在拿什么做比较

但是，与其他无边框的项目相比，有一个超级简单的方法可以让边框看起来像是插入的，那就是添加一个

边框：？px solid transparent到任何没有边框的项目

它将使带边框的项目看起来是插入的

我建议使用
盒子大小调整

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
  box-sizing:border-box;
}

#bar{
  border: 10px solid green;
  }

要在元素中生成边框插入，我找到的唯一解决方案（我尝试了此线程中的所有建议，但都没有效果）是使用伪元素，例如：before

例如

“长方体大小”属性将不起作用，因为边界始终位于所有对象之外

“长方体阴影”选项有两个缺点，一是不能真正工作，二是不受广泛支持（如果您愿意的话，渲染会花费更多的CPU周期）。
如果要确保边框位于元素内部，可以使用

框大小：边框框

这将在元素内部放置以下边框：

边框：10px纯黑

（在框阴影上使用附加参数
inset
也会得到类似的结果，但是这一个用于真实边框，您仍然可以使用阴影进行其他操作。）

请注意上面的另一个答案：只要您对某个元素的
框阴影
使用任何
inset
，该元素上最多只能有2个框阴影，并且需要一个包装div进行进一步的阴影处理

这两种解决方案同样可以让您摆脱不想要的3D效果。
还请注意，这两种解决方案都是可堆叠的（参见我在2018年添加的示例）


。示例边框{
宽度：100px；
高度：100px；
边框：40px纯蓝色；
框大小：边框框；
浮动：左；
}
.示例阴影{
宽度：100px；
高度：100px；
浮动：左；
左边距：20px；
框阴影：0 40px绿色镶嵌；
}
.综合实例{
宽度：100px；
高度：100px；
浮动：左；
左边距：20px；
边框：20px实心橙色；
框大小：边框框；
盒子阴影：0 20px红色插图；
}
如果
框大小调整
不是一个选项，另一种方法就是将其作为大小元素的子元素

CSS

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
}
.border {
  border: 1px solid;
  display: block;
}
.medium { border-width: 10px; }
.large  { border-width: 25px; }



HTML

<div class="box">
  <div class="border small">A</div>
</div>
<div class="box">
  <div class="border medium">B</div>
</div>
<div class="box">
  <div class="border large">C</div>
</div>


A.
B
C
我知道这已经三年了，但我想这可能会对某人有所帮助

其概念是使用：after（或：before）选择器在父元素中定位边框

    .container{
        position:relative; /*Position must be set to something*/
    }

    .container:after{
        position:relative;
        top: 0;
        content:"";
        left:0;
        height: 100%; /*Set pixel height and width if not defined in parent element*/
        width: 100%; 

        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        box-sizing:border-box;

        border:1px solid #000; /*set your border style*/

    }

这是一个老把戏，但我仍然发现最简单的方法是使用带有负值的轮廓偏移量（下面的示例使用-6px）。下面是一个例子——我将外部边框设为红色，轮廓设为白色，以区分这两种颜色：

.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}

<div class="outline-offset"></div>

。轮廓偏移量{
宽度：300px；
高度：200px；
背景：#333c4b；
边框：2倍纯红；
外形：2px#fff实心；
轮廓偏移：-6px；
}
您可以使用背景剪辑：边框框

例如：

.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}

<div class="example">Example with background-clip: border-box;</div>

。示例{
填料：2米；
边界：10px固体rgba（51153,0,0.65）；
背景剪辑：边框框；
背景颜色：黄色；
}
背景剪辑示例：边框框；
因此，我试图在悬停时显示边框，但它移动了主菜单的整个底部栏，看起来不太好，我用以下方法修复了它：

#top-menu .menu-item a:hover {
    border-bottom:4px solid #ec1c24;
    padding-bottom:14px !important;
}
#top-menu .menu-item a {
    padding-bottom:18px !important;
}

我希望这会对其他人有所帮助。
带有伪元素的简单SCSS解决方案

现场演示：


//在此处更改边框大小
$边框宽度：5px；
.带边框的元素{
显示器：flex；
高度：100px；
宽度：100%；
位置：相对位置；
背景色：#F2F2；
框大小：边框框；
//使用伪元素创建插入边框
&：之前{
位置：绝对位置；
内容：''；
显示器：flex；
边框：$边框宽度纯黑色；
左：0；
右：0；
排名：0；
底部：0；
边框：$边框宽度纯黑色；
//重要提示：我们必须从宽度和高度中扣除边框大小
宽度：计算（100%-$边框宽度）；
高度：计算（100%-$边框宽度）；
}
}

Lorem ipsum dolor sit amet
您可以执行以下操作：

.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}

CSS中定义的边框总是添加到框的外部，它永远不会折叠到框中并重叠框后的内容。你必须在上面再加一个盒子。图像链接已经失效。。。您可以为长方体阴影添加第四个px参数，该参数会进行扩展，并更容易地反射阴影images@CoryDanielson：哦，哦。。！我从未意识到，
文本阴影
属性有第四个（大概是）“宽度（但不模糊…）”选项！太棒了编辑在，谢谢。是的，一些关于盒子阴影的教程做了一个可怕的工作记录它。。。盒子阴影上的大部分“覆盖范围”都非常不一致和差。。。它太受欢迎了，这对它自己来说太不好了。。。在我学习第四个扩散参数之前，我会做10个1px的阴影。。。太可怕了。框阴影和文本阴影应该更加一致。。。呜呜
x，y，blur，spread
您的空div示例很好，我不知道您可以将top，left，right，bottom all指定为0，它会这样工作。。所以偷了它。。。呃，它在ie中不起作用：[该死的ie.@CoryDanielson:the
position:absolute；
带全零在ie中效果很好，不起作用的是
背景色（ie不懂
rgba（）
.thing {
  border: 2px solid transparent;
}
.thing:hover {
  border: 2px solid green;
}