[css]「outline」をつかった二重の枠

「outline」をつかった二重の枠

右のキャプチャだと分かりづらいけど、結構使えると思う。

.box {
	float: left;
	display: block;
	width: 150px;
	overflow: hidden;
	margin: 0 8px 8px 0;
	padding: 7px;
	outline: 1px solid #CCC;
	border: 1px solid #FFF;
	background: #FFFEEF;
	background: -moz-linear-gradient(top, #FEFEFE 70%, #F7F7F7 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(70%,#FEFEFE), color-stop(100%,#F7F7F7)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FEFEFE', endColorstr='#F7F7F7',GradientType=0 ); /* ie */
	}

Similar posts