仅限角落的CSS边框

Question

角落边框效果

似乎无法找到任何有关如何使用CSS实现此效果的帮助.

Answer 1

这是一个仅限CSS的选项,如果有人好奇,使用生成的内容(虽然你可以使用额外的元素,以获得更好的浏览器支持 - :before并且:after是IE8 + - http://caniuse.com/#feat=css-gencontent).

HTML:

<div><span></span></div>

CSS:

div {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 1px solid #000;
}
div:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
}
div:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
}
span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}

http://jsfiddle.net/ryanbrill/ARVvq/

Answer 2

这是border-image我提出的解决方案,适用于任何大小的内容.

这是一个演示.

这是用于代码的图像:

border: 15px solid #000000;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;

如果您希望元素是您明确设置的大小,请添加:

box-sizing: border-box;

Answer 3

这是一种创造性的方法......不要认为这种功能有本机支持.

http://jsfiddle.net/tlaverdure/NrU34/

.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
.box4{
border:solid 1px #009;
width:175px;
height:175px;
margin: 10px auto;
position:relative;
}

Answer 4

我认为您也可以通过使用任何类似Photoshop之类的图片编辑器创建带有透明填充的圆角矩形形状，然后将此图像作为您要制作边框的背景，然后将该图像放置在具有位置的div中来实现绝对值，并且具有适合您想要在不影响显示效果的情况下达到所需部分的z索引

因为border-radius与所有旧浏览器都不兼容，在新浏览器中，它必须以多种形式使用，以便与Safari，Opera（即chrome，mozilla）兼容，因此我认为在可以访问的网站中使用此类属性从旧的浏览器不是很有效！这只是我的观点:)