css 显示内联CSS突出显示的示例

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}

<style>
.palette {
	word-spacing: -.3em;
}

.palette > div {
	display: inline-block;
	padding: 20px;
	text-align: center;
	background: silver linear-gradient(hsla(0,0%,100%,.5), transparent);
}

.palette > div:before {
	content: 'Text'
}
</style>

<div class="palette">
	<div style="background-color: orange"></div>
	<div style="background-color: rgb(111, 219, 160)"></div>
	<div style="background-color: hsl(220,60%,80%)"></div>
	<div></div>
	<div style="background-color: indianred"></div>
	<div style="background-color: rgb(68, 219, 216)"></div>
	<div style="background-color: lavender"></div>
	<div style="background-color: rgb(223, 198, 89)"></div>
</div>

/**
 * Example to show off inline CSS highlighting
 */