刺繍で縫いつけたようなボックスを描くことができます。
以下のCSSを追加し、
.stitched {
padding: 15px 30px;
margin: 10px;
background: #fcb9c0;
color: #fff;
font-size: 16px;
line-height: 1.3em;
border: 2px dashed #fff;
border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #fcb9c0, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #b5737a;
font-weight: normal;
}
以下のHTMLの記述を記事に入力すると
</pre> <div class="stitched">刺繍で縫いつけたようなボックスを描くことができます。</div> <pre>
刺繍で縫いつけたようなボックスを描くことができます。
刺繍で縫いつけたようなボックスを描くことができます。