如何使用css为任何元素赋予边框而不向元素的整个宽度添加border-width？
就像在Photoshop中一样,我们可以给出笔画 - 内部,中部和外部
我认为默认的css边框属性就像在photoshop中心一样,我是对的吗？
我想在盒子内面给边框而不是在外面.并且不希望在框宽中包含边框宽度.
小智 209
outline:1px solid white;
这不会增加额外的宽度和高度.
Cha*_*had 28
看看CSS盒子大小......
大小调整CSS3属性可以执行此操作.border-box值(与内容框默认值相对)使最终呈现的框表示声明的宽度,并在框内剪切任何边框和填充.您现在可以安全地声明您的元素具有100%宽度,包括基于像素的填充和边框,并完美地实现您的目标.
我建议创建一个mixin来为你处理这个问题.您可以在W3c上找到有关盒子大小的更多信息http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
小智 23
根据您的预期浏览器支持,您可以使用该box-shadow属性.
您可以将模糊值设置为0,并将展开设置为您所追求的厚度.盒子阴影的好处在于你可以控制它是在外面(默认情况下)还是在内部(使用inset属性)绘制的.
例:
box-shadow: 0 0 0 1px black; // Outside black border 1px
要么
box-shadow: 0 0 0 1px white inset; // Inside white border 1px
使用框阴影的一大优势是,您可以通过使用多个框阴影来获得创意:
box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;
我唯一不能说的是这将使渲染性能明智的区别.我认为如果你有一百个元素同时在屏幕上使用这种技术,它可能会成为一个问题.
mik*_*ans 15
我遇到了同样的问题.
.right-border {
position: relative;
}
.right-border:after {
content: '';
display: block;
position: absolute;
top: 0; right: 0;
width: 1px;
height: 100%;
background: #e0e0e0;
}
这个答案允许您指定一个单侧.并且可以在IE8 +中使用 - 与使用box-shadow不同.
当然,您需要更改您的伪元素属性,因为您需要挑出特定的一面.
*新增和改进*
&:before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}
这允许使用边框并击中框的多个边.
正如abenson所说,你可以使用轮廓,但有一个问题是Opera可能会画出一个"非矩形形状".似乎有用的另一种选择是使用负边距,例如这个css:
div {
float:left;
width: 50%;
border:1px solid black;
margin: -1px;
}
有了这个html:
<body>
<div>A block</div>
<div>Another block</div>
</body>
另一个不太干净的选择是为html添加额外的标记.例如,您设置外部元素的宽度并将边框添加到内部元素.CSS:
.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }
和HTML:
<body>
<div class="outer">
<div class="inner">A block</div>
</div>
<div class="outer">
<div class="inner">Another block</div>
<div>
</body>
使用box-sizing: border-box以创建一个边界INSIDE一个div,而无需修改DIV宽度.
使用outline创建边界以外,而无需修改DIV宽度的股利.
这是一个例子:https: //jsfiddle.net/4000cae9/1/
注意:
border-box目前IE不支持它
支持:
http://caniuse.com/#feat=outline
http://caniuse.com/#search=border-box
#test, #test2 {
width: 100px;
height:100px;
background-color:yellow;
}
#test {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 10px dashed blue;
}
#test2 {
outline: 10px dashed red;
}
<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>
没有边框时使用填充。有边框时删除填充。
.myDiv {
width: 100px;
height: 100px;
padding-left: 2px;
padding-right: 2px;
}
.myDiv:hover {
padding-left: 0;
padding-right: 0;
border-left: 2px solid red;
border-right: 2px solid red;
}
本质上，只需用 2px 边框替换 2px 填充。Div 大小保持不变。
小智 5
通常，布局移动是问题所在。
如果你不需要border-radius那就outline: 1px solid black;可以了。
如果这样做，请使边框透明并在应该显示时更改其颜色：
/* RELEVANT */
.my-div {
border-radius: 8px;
border: 2px solid transparent;
}
.my-div:hover {
border: 2px solid #ffffffa8;
}
/* NOT RELEVANT */
.pretty {
color: white;
padding: 10px 20px;
background: #0077b6;
font-size: 16px;
transition: border .15s ease-out;
cursor:pointer;
}<button class="pretty my-div">
Button
</button>