中国风标题边框

Fancy Border Box

css3, border

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2102
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
*:before,
*:after {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
    background: radial-gradient(#000033, #000000);
    overflow: hidden;
    color: #fff;
    font-family: 'Open Sans';
    font-size: 18px;
}
h1 {
    font-weight: 700;
    margin-bottom: 0.5em;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 600px;
    padding: 5px;
    border: 2px solid #b78846;
}
.box:before,
.box:after {
    content: "•";
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #b78846;
    border: 2px solid #b78846;
    line-height: 12px;
    top: 5px;
    text-align: center;
}
.box:before {
    left: 5px;
}
.box:after {
    right: 5px;
}
.box .box-inner {
    position: relative;
    border: 2px solid #b78846;
    padding: 40px;
}
.box .box-inner:before,
.box .box-inner:after {
    content: "•";
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #b78846;
    border: 2px solid #b78846;
    line-height: 12px;
    bottom: -2px;
    text-align: center;
}
.box .box-inner:before {
    left: -2px;
}
.box .box-inner:after {
    right: -2px;
}

HTML

Fancy Border Box

css3, border

编辑器支持Emmet

快捷键

Fancy Border Box

css3, border

CSS3嵌入在镜框底边沿的图像标题

CSS3 动态边框以及标题

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：