我想创建以下 div 边框: 我对绿色边框部分进行了排序,但没有对顶部的红线进行排序。有任何想法吗?
到目前为止的代码:
#myborder {
border: 4px solid green;
}
使用这个 css http://jsfiddle.net/PESHk/3
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top:2px solid red;
padding:8px;
}
研究 Hushme 的答案:http: //jsfiddle.net/PESHk/2/
#myborder {
box-shadow: 0 0 0 4px green, 0 0 0 4px green inset;
border-top: 2px solid red;
padding: 8px;
}
在这里使用::before
:
#myborder {
box-shadow: 0px 4px 15px rgba(0,0,0,0.15);
border: 8px solid green;
border-top: 0;
padding: 16px 8px 8px 8px;
position: relative;
}
#myborder::before {
width: 100%;
background: red;
height: 2px;
border: 4px solid green;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
}