愚人节底色线框标题

美化源代码

复制源代码

源代码
<section style="margin: 10px 0px; text-align: center;"><section style="background-color:#fefefe;display:inline-block;transform: rotatez(0deg);z-index: 1;padding:0px 8px;"><p><span style="font-size: 15px; color: rgb(252, 157, 191);">04.01</span></p></section><section style="margin:-10px 0px 0px;"><section style="border-top:solid 1px #fc9dbf;border-bottom:solid 1px #fc9dbf;padding:7px 10px;display:inline-block;"><section style="display: flex;justify-content: center;align-items: center;"><section style="width:13px;height:13px;border:1px solid #fc9dbf;transform: rotatez(45deg);-webkit-transform: rotatez(45deg);-moz-transform: rotatez(45deg);-ms-transform: rotatez(45deg);-o-transform: rotatez(45deg);"></section><section style="margin:0px -13px;display: flex;justify-content: center;align-items: center;"><section style="display: inline-block; vertical-align: top; width: 0.5em; height:0px; border-bottom: 1em solid #fc9dbf; border-top:1em solid #fc9dbf; border-left: 0.5em solid transparent !important;transform: rotatez(0deg);"></section><section style="display: inline-block; vertical-align: top; height: 2em; line-height: 2em; background-color: #fc9dbf; color: #fc9dbf; letter-spacing: 1px; padding-right: 10px; padding-left: 10px;transform: rotatez(0deg);z-index: 1;"><p style="letter-spacing: 2px;"><span style="color: #ffffff; font-size: 15px; letter-spacing: 2px;">粉色日期标题</span></p></section><section style="display: inline-block; vertical-align: top; width: 0.5em; height:0px; border-bottom:1em solid #fc9dbf; border-top:1em solid #fc9dbf; border-right: 0.5em solid transparent !important;transform: rotatez(0deg);z-index: 1;"></section></section><section style="width:13px;height:13px;border:1px solid #fc9dbf;transform: rotatez(45deg);-webkit-transform: rotatez(45deg);-moz-transform: rotatez(45deg);-ms-transform: rotatez(45deg);-o-transform: rotatez(45deg);"></section></section></section></section></section>

可视化

04.01

粉色日期标题

专注移动端开发

快速链接

关于我们

115cms信息内容管理系统