Cocoonの白抜きボックスをカスタマイズ｜複数スタイルと簡単切り替え方法を解説

/* スタイル 2 */
.blank-box{
	border-radius:0;
	border-width: 1px;
}

/* スタイル 3 */
.blank-box{
	border-radius:0;
	border-width: 2px;
}

/* スタイル 4 */
.blank-box{
	border-radius:0;
	border-width: 1px;
	border-style:dashed;
}

/* スタイル 5 */
.blank-box{
	border-radius:0;
	border-width: 2px;
	border-style:dashed;
}

/* スタイル 6 */
.blank-box{
	border-radius:20px;
	border-width: 2px;
	border-style:dotted;
}

/* スタイル 7 */
.blank-box{
	border-radius:20px;
	border-width: 4px;
	border-style:dotted;
}

/* スタイル 8 */
.blank-box{
	border-radius:0;
	border-width: 5px;
	border-right:none;
	border-left:none;
	border-bottom:none;
}

/* スタイル 9 */
.blank-box{
	border-radius:0;
	border-width: 5px;
	border-right:none;
	border-top:none;
	border-bottom:none;
}

/* スタイル 10 */
.blank-box{
	border-radius:0;
	border-width: 0;
	background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px);/*ストライプ*/
}

/* スタイル 11 */
.blank-box{
	border-radius:0;
	border-width: 0;
	background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg,  transparent 19px, #ccc 20px);
	background-size: 20px 20px;
}

/* スタイル 12 */
.blank-box{
	border-radius:0;
	border-width: 0;
	position:relative;
}

.blank-box:after{
	position: absolute;
	content: '';
	right: 0px;
	top: 0px;
	border-width: 0 20px 20px 0;
	border-style: solid;
	border-color: #ccc #fff #ccc;
	box-shadow: -1px 1px 1px rgb(0 0 0 / .15);
}

/* スタイル 13 */
.blank-box{
	border-radius:0;
	border-width: 0;
	position: relative;
	z-index: 0;
}

.blank-box:before{
	position: absolute;
	border: 2px dashed #fff;/*破線の太さ・色*/
	content: '';
	display: block;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin:5px;
	z-index: -1;
	border-radius:3px;
}