轴线边框样式

美化源代码

复制源代码

源代码
<section style="width: 95%;margin-top: 5px;margin-bottom: 5px;"><section style="display: inline-block; float: right; width: 1em; height: 1em; margin-top: 1.5em; margin-right: -0.5em; border-width: 1px; border-style: solid; border-color: rgb(157, 180, 194); border-radius: 100%; color: rgb(255, 255, 255); background-color: rgb(254, 254, 254); box-sizing: border-box;"><br></section><section style="border-right: 1px solid rgb(157, 180, 194); height: 1.2em; box-sizing: border-box;"><br></section><section style="border-right: 1px solid rgb(157, 180, 194);margin-top: -1.2em;text-align: right;box-sizing: border-box;"><section style="display: inline-block;vertical-align: middle;width: 90%;padding: 8px 10px;margin: 0.5em auto;border-width: 1px;border-style: solid;border-color: rgb(157, 180, 194);box-sizing: border-box;"><p><span style="color:#3F3F3F;font-size:14px;">人与人的缘分总是长长短短，像削铅笔。<mpchecktext contenteditable="false" id="1587000219429_0.31469525968726364"></mpchecktext>越是适切，消耗越是大。<mpchecktext contenteditable="false" id="1587000219430_0.46317090728956356"></mpchecktext></span></p><p><span style="color:#3F3F3F;font-size:14px;">——张怡微《哀眠》<mpchecktext contenteditable="false" id="1587000219431_0.8203701172661684"></mpchecktext></span></p></section><section style="display: inline-block;vertical-align: top;width: 0px;margin-left: -1px;padding-right: 1em;margin-top: 1.5em;box-sizing: border-box;"><section style="height:0px;width: 0px; border-left: 11px solid rgb(157, 180, 194); box-sizing: border-box; border-top: 8px solid transparent !important; border-bottom: 8px solid transparent !important;"><br></section><section style="height:0px;width: 0px; margin-top: -15px; border-left: 10px solid rgb(255, 255, 255); box-sizing: border-box; border-top: 7px solid transparent !important; border-bottom: 7px solid transparent !important;"><br></section></section></section></section>

可视化

人与人的缘分总是长长短短，像削铅笔。越是适切，消耗越是大。

——张怡微《哀眠》

专注移动端开发

快速链接

关于我们

115cms信息内容管理系统