json 连续图像边框

Posted 2021-05-19

/**
 * Continuous Image Borders
 */
div {
	background: #fff padding-box;
	border: 1rem solid transparent;
	border-image: 16 repeating-linear-gradient(-45deg, #b76057 0, #b76057 1rem, #fff 0, #fff 2rem,
	              #4ca9ab 0, #4ca9ab 3rem, #fff 0, #fff 4rem);
	/* Styling & enable resize */
	width: 21rem;
	height: 10rem;
	padding: 1em;
	overflow: hidden;
	resize: both;
	font: 100%/1.6 Baskerville, Palatino, serif;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

<div>
Here's an envelope looking border. It can be used on contact us forms to create a sense of mailing messages to the site owner.
</div>

// alert('Hello world!');

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}