我有一个
我宁愿让这个边界距离div的边缘是-1px。 div本身是100px x 100px,如果我添加一个边框,那么我必须做一些数学来使边框出现。
有什么方法可以让边框出现,并确保框仍然是100px(包括边框)?
#1楼
你也可以像这样使用box-shadow:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
这仅适用于现代浏览器。 例如:没有IE 8支持。 有关详细信息, 请参阅caniuse.com(框阴影功能) 。
#2楼
我知道这有点旧,但由于关键词“border inside”让我直接来到这里,我想分享一些可能值得一提的发现。 当我在悬停状态下添加边框时,我得到了OP正在谈论的效果。 边框将像素广告到框的尺寸,使其变得有弹性。 还有两种方法可以解决这个问题,这也适用于IE7。
1)边框已经附加到元素上,只需更改颜色即可。 这种方式已经包含了数学。
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2)以负余量补偿边界。 这仍然会添加额外的像素,但元素的定位不会跳跃
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
#3楼
最好的跨浏览器解决方案(主要用于IE支持)如@Steve所说的是在宽度和高度上设置一个div为98px而不是在它周围添加1px的边框,或者你可以为div 100x100 px制作背景图像并在其上绘制边框。
#4楼
可能是迟来的回答,但我想与我的发现分享。 我找到了两个新方法来解决这个问题,我在答案中没有找到:
内部边框通过box-shadow css属性
是的,box-shadow用于向元素添加框阴影。 但是你可以指定inset阴影,它看起来像一个内边框而不是阴影。 您只需要将水平和垂直阴影设置为0px ,并将box-shadow的“ spread ”属性设置为您想要的边框宽度。 因此,对于10px的“内部”边界,您将编写以下内容:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
这是jsFiddle示例,说明了box-shadow边框和“普通”边框之间的区别。 这样你的边框和盒子宽度总共100px,包括边框。
关于box-shadow的更多信息: 这里
通过大纲css属性边界
这是另一种方法,但这种方式边框将在框外。 这是一个例子 。 如下例所示,您可以使用css outline属性来设置不影响元素宽度和高度的边框。 这样,边框宽度不会添加到元素的宽度。
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
更多关于大纲: 这里
#5楼
雅虎 这确实是可能的。 我找到了。
对于底边:
div {box-shadow: 0px -3px 0px red inset; }
对于顶级边框:
div {box-shadow: 0px 3px 0px red inset; }