如何在此图像中创建非矩形边框？
现行代码：http://jsfiddle.net/bqjr5wep/
div {
background:#1c1c1c;
width:400px;
height:200px;
position:relative;
}
div:before,div:after {
content:'';
display:block;
left:10px;
right:10px;
top:10px;
bottom:10px;
border:2px solid #FFF;
position:absolute;
}
div:after {
left:14px;
top:14px;
right:14px;
bottom:14px;
}
解决方法
示例1：具有非实心页面背景的形状的透明背景
这是一种支持页面非渐变背景(渐变或图像),形状透明背景以及可缩放的方法.缺点可能是它需要不止一个元素.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after,.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
border: 2px solid white;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg,crimson,indianred,purple);
}
<div class="shape"> <div class="shape-inner"></div> </div>
样品2：形状的纯色(非透明)背景
如果形状需要与页面背景相比具有不同的背景并且形状的背景是纯色,则可以使用具有小修改的相同方法.样品如下：
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
}
.shape:after,.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: steelblue;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before,.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid white;
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: linear-gradient(90deg,purple);
}
<div class="shape"> <div class="shape-inner"></div> </div>
样本3：形状的渐变/图像背景
您还可以将与页面背景不同的图像(或)渐变添加到形状的背景中,它看起来像在下面的代码段中.它不能完全遵循形状的外边界.
body {
background: linear-gradient(90deg,purple);
}
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
border: 2px solid white;
background: url(http://lorempixel.com/600/600);
}
.shape:after {
position: absolute;
content: '';
top: -4px;
left: 10px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 2px 2px 0px 0px;
}
.shape:before {
position: absolute;
content: '';
top: 10px;
left: -4px;
height: 100%;
width: 100%;
border: 2px solid white;
border-width: 0px 0px 2px 2px;
}
.shape-inner:before {
position: absolute;
content: '';
height: 12px;
width: 12px;
top: -6px;
left: -6px;
border: 2px solid white;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
bottom: -6px;
right: -6px;
border: 2px solid white;
border-width: 2px 0px 0px 2px;
}
<div class="shape"> <div class="shape-inner"></div> </div>
样品4：形状的半透明背景
这是最棘手的,但仍然可以通过对代码段进行一些小修改来实现.这个想法是从this thread挑选出来的.
.shape {
position: relative;
height: 200px;
width: 500px;
}
.shape-inner {
position: absolute;
top: 2px;
left: 2px;
height: 100%;
width: 100%;
background: rgba(80,80,0.75);
border: 2px solid rgba(255,255,0.75);
}
.shape:after,.shape:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
opacity: 0.75;
border: 2px solid white;
z-index: -1;
}
.shape:after {
top: -4px;
left: 10px;
border-width: 2px 2px 0px 0px;
background: linear-gradient(180deg,rgb(80,80) 5px,transparent 5px) no-repeat,linear-gradient(270deg,80) 4px,transparent 4px) no-repeat;
}
.shape:before {
top: 10px;
left: -4px;
border-width: 0px 0px 2px 2px;
background: linear-gradient(0deg,linear-gradient(90deg,transparent 4px) no-repeat;
}
.shape-inner:before,.shape-inner:after {
position: absolute;
content: '';
height: 12px;
width: 12px;
border: 2px solid rgba(255,0.75);
}
.shape-inner:before {
top: -6px;
left: -6px;
border-width: 0px 2px 2px 0px;
}
.shape-inner:after {
bottom: -6px;
right: -6px;
border-width: 2px 0px 0px 2px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/400/200/sports/Dummy-Text/);
}
<div class="shape"> <div class="shape-inner"></div> </div>
