<div style="padding: 10px; border-radius: 10px; border: 5px double #00cccc;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding: 10px; border-radius: 10px; border: 5px solid #00cccc;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding: 10px; border-radius: 30px; border: 5px dashed #00cccc;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding: 10px; border-radius: 15px; border: 2px dashed #00cccc;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding: 10px; border-radius: 30px; border: 5px dotted #ff7f50;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding: 10px; border-radius: 15px; border: 2px dotted #ff7f50;">
<p>文章</p>
<p>文章</p>
</div>
<div style="padding:10px; background:#afeeee; border-radius: 10px; ">
<p>文章</p>
<p>文章</p></div>
<div style="margin: 10px 10px; padding: 10px; background-image: url(http://stat.ameba.jp/user_images/20160713/12/yamadado-2i7/f4/91/j/o0080008013696271621.jpg); border-radius: 20px; ">
<div style="background-color: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 10px;">
<p>文章</p>
<p>文章</p></div></div>
<div style="padding: 0.5em 1em; margin: 2em 0; background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.5em 1em; margin: 2em 0; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; ">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.5em 1em; margin: 2em 0; color: #ff7d6e; background: #ffebe9; border-top: solid 10px #ff7d6e;; ">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.5em 1em; margin: 2em 0; color: #00BCD4; background: #e4fcff; border-top: solid 6px #1dc1d6; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.5em 1em; margin: 2em 0; color: #5d627b; background: white; border-top: solid 5px #5d627b; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);">
<p>文章</p>
<p>文章</p></div>
<div style="padding: 0.2em 0.5em; margin: 2em 0; background: #d6ebff; box-shadow: 0px 0px 0px 10px #d6ebff; border: dashed 2px white;">
<p>文章</p>
<p>文章</p></div>
タイトル
<div style="position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #95ccff; border-radius: 8px;">
<div style="position: absolute; display: inline-block; top: -13px; left: 10px; padding: 0 9px; line-height: 1; font-size: 19px; background: #FFF; color: #95ccff; font-weight: bold;">
<p>タイトル</p></div>
<p>本文</p></div>
タイトル
<div style="position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce;">
<div style="position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0;">
<p>タイトル</p></div>
<p>文章</p></div>
タイトル
<div style="position: relative; margin: 2em 0; padding: 25px 10px 7px; border: solid 2px #FFC107;">
<div style="position: absolute; display: inline-block; top: -2px; left: -2px; padding: 0 9px; height: 25px; line-height: 25px; vertical-align: middle; font-size: 17px; background: #FFC107; color: #ffffff; font-weight: bold;">
<p>タイトル</p></div>
<p>文章</p></div>
タイトル
<div style="margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);">
<div style=" font-size: 1.2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em;">
<p>タイトル</p></div>
<p>文章</p></div>