如何仅显示角边框? [英] How can I show only corner borders?
本文介绍了如何仅显示角边框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否可以在 CSS 中制作边框但仅限于角落.像这样:
I'm wondering if it's possible in CSS to make a border but only for corner. Something like this:
**** ****
* *
* *
CONTENT
* *
* *
**** ****
推荐答案
假设 <div id="content">CONTENT</div>
和 CONTENT
至少包含一个 HTML 节点.
Assuming <div id="content">CONTENT</div>
and that CONTENT
includes at least one HTML node.
#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute; content:' ';
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
这是一个小提琴
这篇关于如何仅显示角边框?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文