“聚焦”周围的边框和框周围。说实话。如何在CSS上重新创建它。来自theatlantic.com。
答案 0 :(得分:0)
尝试这样的事情:
<强> CSS:强>
div.box
{
width: 200px;
height: 120px;
text-align: center;
line-height: 120px;
position: relative;
background: #CCC;
}
div.box > span
{
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
border-top: 1px solid red;
border-left: 1px solid red;
}
div.box > span + span
{
top: 0;
left: 100%;
border-left: none;
border-right: 1px solid red;
margin-left: -20px;
}
div.box > span + span + span
{
top: 100%;
left: 100%;
border-top: none;
border-bottom: 1px solid red;
margin-top: -20px;
}
div.box > span + span + span + span
{
top: 100%;
left: 0;
border-right: none;
border-left: 1px solid red;
margin-left: 0;
}
<强> HTML:强>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
Hello.
</div>