我正在尝试使用box-shadow
inset
添加边框,因为条件我无法在其中一个a
元素上使用border-box
。但没有得到。有什么帮助吗?
.parent{
background: #FFF;
padding:5rem;
box-shadow: inset 1px 1px 0px 2px rgba(0,0,0,1);
}
<div class="parent"></div>
将阴影的水平和垂直偏移量(值(更改为 0px,例如:
box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);
.parent{
background: #FFF;
padding:5rem;
box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,1);
}
<div class="parent"></div>
如果您希望所有边的边框宽度相等 - 只需删除offset-x
并offset-y
:
.parent{
background: #c9c9c9;
padding:5rem;
box-shadow: inset 0 0 0 2px rgba(0,0,0,1);
}
<div class="parent"></div>
如果您无法使用border
属性,这里有不同的技术允许您为元素创建边框:
使用大纲
.parent{
background: #FFF;
padding:5rem;
outline:2px solid rgba(0,0,0,1);
}
<div class="parent"></div>
使用框阴影
.parent{
background: #FFF;
padding:5rem;
margin:5px;
box-shadow:0 0 0 2px rgba(0,0,0,1);
}
.parent.inset {
box-shadow:inset 0 0 0 2px rgba(0,0,0,1);
}
<div class="parent"></div>
<div class="parent inset"></div>
使用渐变
.parent{
background: #FFF;
padding:5rem;
margin:5px;
background:
linear-gradient(#000,#000) top/100% 2px,
linear-gradient(#000,#000) bottom/100% 2px,
linear-gradient(#000,#000) left/2px 100%,
linear-gradient(#000,#000) right/2px 100%;
background-repeat:no-repeat;
}
<div class="parent"></div>
如果你想有一个background-color
,梯度的另一种方式:
.parent{
background: #FFF;
padding:5rem;
margin:5px;
background:
linear-gradient(pink,pink) center/calc(100% - 4px) calc(100% - 4px),
linear-gradient(#000,#000);
background-repeat:no-repeat;
}
<div class="parent"></div>