CSS代码实现:好看的摘要样式
这是需要添加到css文件中的代码
.abstract {
background: #fff;
font-size: 14px;
color: #428BCA;
display: block;
}
.abstract fieldset {
margin: 0 0 10px;
padding: 5px 15px;
border: 4px solid #428BCA;
border-radius: 10px;
}
.abstract legend {
padding: 0 5px;
color: #428BCA;
font-weight: bold;
font-size: 15px;
}
.abstract p {
text-indent: 0 !important;
}
.no_abstract {
display: none;
}
fieldset{
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
.kan fieldset {
padding: 5px 25px;
margin: 0 0 10px 0;
border-radius: 2px;
border: 1px solid #ddd;
}
.abstract fieldset {
margin: 0 0 10px;
padding: 5px 15px;
border: 4px solid #428BCA;
border-radius: 10px;
}
.clear {
clear: both;
display: block;
}这是调用的方法
<span class="abstract"><fieldset><legend>摘要</legend><p>想要显示的文字</p> <div class="clear"></div></fieldset></span>
完成后的效果是这样的：
