css - 使用 CSS 在容器周围添加花式对 Angular 线边框

Question

我愿意在容器周围实现花哨的对 Angular 线边框效果我想通过 CSS 设置样式我知道通过使用前后伪元素我们可以在容器周围设置不同的排序或边框但是这里的情况是不同的你可以在附图中看到。

非常感谢。

Answer 1

如果你想为此目的使用伪元素，你可以试试这个:

CSS:

.checked {
    background-image:url('http://subtlepatterns.com/patterns/old_map.png');
    background-repeat:repeat;
    width:400px;
    height:auto;
    padding:10px;
    position:relative;
}
.checked div {
    background-image:url(http://i.stack.imgur.com/GIHQn.jpg);
    padding:10px;
}
.checked img {
    max-width:100%;
}
div.checked:after {
    position: absolute;
    content:"";
    bottom: 10px;
    left: 10px;
    height: 10px;
    width: 10px;
    background: inherit;
    z-index:1;
}
div.checked:before {
    position: absolute;
    content:"";
    top: 10px;
    right: 10px;
    height: 10px;
    width: 10px;
    background: inherit;
    z-index:1;
}

HTML:

<div class="checked">
    <div>
        <img src="http://s3.amazonaws.com/fiverr.com/deliveries/45941/large/Cartoons_Caricatures_work_sample_from_pixzyl_1349432179.jpg?1349432179" />
    </div>
</div>

演示:http://jsfiddle.net/lotusgodkk/GCu2D/180/