Bea*_*Hat 57
我想你已经对这两个属性有了一点了解.边框影响元素的外边缘,使元素的大小不同.大纲不会改变元素的大小或位置(不占用空间)并超出边界.根据您的描述,您要使用border属性.
在浏览器中查看下面的简单示例:
<div style="height: 100px; width: 100px; background: black; color: white; outline: thick solid #00ff00">SOME TEXT HERE</div>
<div style="height: 100px; width: 100px; background: black; color: white; border-left: thick solid #00ff00">SOME TEXT HERE</div>注意边框如何推动底部div,但轮廓不会移动顶部div,轮廓实际上与底部div重叠.
你可以在这里阅读更多相关信息:
Border
Outline
Ben*_*roo 14
尝试大纲属性W3Schools - CSS Outline
大纲不会干扰元素/ div的宽度和长度!
请点击我在底部提供的链接,查看可以制作边框的不同方法的工作演示,以及内部/内联边框,甚至是不会破坏元素尺寸的边框!不需要每次都添加额外的div,如另一个答案所述!
您还可以将边框与轮廓结合使用,如果愿意,还可以使用框阴影(也通过链接显示)
<head>
<style type="text/css" ref="stylesheet">
div {
width:22px;
height:22px;
outline:1px solid black;
}
</style>
</head>
<div>
outlined
</div>
通常默认情况下,'border:'将边框放在宽度的外侧,测量,添加到整体尺寸,除非您使用'inset'值:
div {border: inset solid 1px black};
但是'outline:'是边框之外的额外边框,当然还会为元素增加额外的宽度/长度.
希望这可以帮助
PS:我也受到启发为你做这个:使用边框,轮廓和盒子阴影
dfs*_*fsq 11
IsisCode为您提供了一个很好的解决方案.另一个是将border div 放在父div中.查看此示例http://jsfiddle.net/A2tu9/
UPD:你也可以使用伪元素:after(:before),在这种情况下,HTML不会被额外的标记污染:
.my-div {
position: relative;
padding: 4px;
...
}
.my-div:after {
content: '';
position: absolute;
top: -3px;
left: -3px;
bottom: -3px;
right: -3px;
border: 1px #888 solid;
}
为什么不简单地使用background-clip？
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
请参阅:
http://caniuse.com/#search=background-clip
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
https://css-tricks.com/almanac /属性/ b /背景夹
太晚了,但我遇到了类似的问题.我的解决方案是伪元素 - 没有额外的标记,你可以在不影响宽度的情况下绘制边框.绝对定位伪元素(主要定位相对)和whammo.
见下文,JSFiddle http://jsfiddle.net/mcx6m/
.hello {
position: relative;
/* Styling not important */
background: black;
color: white;
padding: 20px;
width: 200px;
height: 200px;
}
.hello::before {
content: "";
position: absolute;
display: block;
top: 0;
left: -5px;
right: -5px;
bottom: 0;
border-left: 5px solid red;
border-right: 5px solid red;
z-index: -1;
}
我根据您的需要分享了两种解决方案：
<style type="text/css" ref="stylesheet">
.border-inside-box {
border: 1px solid black;
}
.border-inside-box-v1 {
outline: 1px solid black; /* 'border-radius' not available */
}
.border-outside-box-v2 {
box-shadow: 0 0 0 1px black; /* 'border-style' not available (dashed, solid, etc) */
}
</style>
示例：https : //codepen.io/danieldd/pen/gObEYKj