［み］CSSでステッチ（縫い目）を表現する方法

今回は、こんな風なステッチ（縫い目）をCSSだけで表現する方法を紹介します。基本的にはコピペで大丈夫ですので、どんどんコピペして使ってください。

つくり方☚こっちがおススメ

まず、コードから。

CSS

.stitched {
	padding:15px;
	background:#f9f9f9;
	border-radius: 3px;

	border: dashed 2px #d9d9d9; 
	/* ↑これがステッチになります */
	box-shadow: 0 0 0 10px #f9f9f9;
	/* ↑これがポイントです */
}

こんな風になります

borderプロパティで縫い目をつくり、その外側の領域は、box-shadowプロパティで塗ることで、borderが内側に来たような表現ができます。妙に横に長くなっているのは、単にpタグだからです。

つくり方その2

まず、コードから。

CSS

.stitched {
	padding:25px;
	background:#f9f9f9;
	border-radius: 3px;
	box-shadow: 1px 1px 6px 3px rgba(10,10,0,.5);

	outline: dashed 2px #d9d9d9; 
	/* ↑これがステッチになります */
	outline-offset: -10px;
	/* ↑内側に移動させます */
}

こんな風になります

こちらの方法では、outlineプロパティを使っています。