Question

是否可以在不使用背景图像和仅使用一个元素的情况下重新创建这样的框？

enter image description here

理想情况下，我可以通过添加类来控制哪些角落变暗，因此上面的图像可能是class="box dark-top dark-left dark-bottom dark-right"。我可以通过使用：before和：after来使两个变暗，但是如果想要在没有添加额外标记的情况下使三个或四个角变暗的好方法，我就会遇到问题。

Answer 1

这是一种用一个元素使所有四个角变暗的方法，尽管我还没弄明白如何使特定的角变暗。但我的理论是将原始边界作为黑色边框，然后使用伪元素减轻/减轻框的两侧。

小提琴：http://jsfiddle.net/KZSLH/

.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}

Answer 2

这远非完美，但这是我能想到的唯一方式来做这样的事情......你会想要使用边框厚度，边框半径和哪些边框是圆形的，以确保它适合你的需求

我唯一想知道的是如何让角落的边缘变得尖锐而不是逐渐减少......也许有人可以贡献那部分？

首先，从两个重叠的div元素开始：

<div id="thick" />
<div id="thin" />

然后，使用圆角和相对定位逐渐变细并创建“粗体”角。

#thick {
  position:absolute;
  top:50px;
  left:50px;
  height:100px;
  width:100px;
  background-color:white;
  border:3px solid black;
}

#thin {
  position:relative;
  top:-2px;
  left:-2px;
  height:104px;
  width:104px;
  background-color:white;
  border-radius: 15px;
}

这是一个小提琴：http://jsfiddle.net/bGrdA/

并感谢this post给了我这个想法。

Answer 3

我想我明白了。关键是在它自己的元素框中必须有内容，这将是我的场景。

示例：http://jsfiddle.net/n7pgP/

可以添加到框中的类是：

dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right

Answer 4

有些事情可以尝试两个元素

http://jsfiddle.net/V8jmR/

#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute;
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
    content: ' ';
}
#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}

原始答案 CSS - show only corner border

Answer 5

我知道的唯一可能是使用其他元素：

<div class="box">
    <span class="darkTopLeft"></span>
    <span class="darkTopRight"></span>
    <span class="darkBottomLeft"></span>
    <span class="darkBottomRight"></span>
</div>

.box {
    background-color: #fff;
    border: 1px solid #ccc;
    height: 100px;
    position: relative;
    width: 100px;
}

.box > span {
    height: 10px;
    position: absolute;
    width: 10px;
}

.darkTopLeft {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    left: -1px;
    top: -1px;
}

.darkTopRight {
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    right: -1px;
    top: -1px;
}

.darkBottomLeft {
    bottom: -1px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    left: -1px;
}

.darkBottomRight {
    bottom: -1px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    right: -1px;
}

http://jsfiddle.net/cM7xU/

没有使用图像的黑暗角落的盒子

5 个答案: