CSS - 仅显示角边框 [英] CSS - show only corner border

问题描述

我想知道是否可能在CSS或Jquery做一个边框，但只是为角。像这样：

  **** **** 
 * * 
 * * 
 
 CONTENT 
 
 * * 
 * * 
 **** **** 
  

解决方案

我会使用重叠的div。

和其他具有圆角（所以它不隐藏第一个的角落）。

 < ; div id =div1/> 
< div id =div2/> 
 
 
＃div1 {
 position：absolute; 
 top：9px; 
 left：9px; 
 height：100px; 
 width：100px; 
 background-color：white; 
 border：1px solid black; 
} 
 
＃div2 {
 position：relative; 
 top：-1px; 
 left：-1px; 
 height：102px; 
 width：102px; 
 background-color：white; 
 border-radius：15px; 
} 
  

I'm wondering if it's possible in CSS or Jquery to make a border but only for corner. Something like this:

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****

解决方案

I would use overlapping divs.

One with square corners. And the Other with rounded corner (so it doesn't hide the corners of the first one).

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

Result:

---

An enhanced solution provided by @web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/

这篇关于CSS - 仅显示角边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！