Html&CSS/html5&css3
0226_html5/css3_background-clip
.Epona.
2020. 3. 4. 02:41
<style>
/* background-clip */
.clip div{width:400px; height: 100px; border:10px dotted #333;
margin-bottom: 20px; background-color: yellow; padding:30px;
}
.clip .padding{background-clip: padding-box} /*보더부터*/
.clip .border{background-clip: border-box} /*보더를 뺀 패딩 부터*/
.clip .content{background-clip: content-box} /*콘텐츠 부터*/
</style>
</head>
<body>
<h3>[background-clip]: 배경의 범위 지정</h3>
<div class="clip">
<div class="border">배경을 표시할 범위가, border부터/까지</div>
<div class="padding">배경을 표시할 범위가, padding부터/까지</div>
<div class="content">배경을 표시할 범위가, content부터/까지</div>
</div>
</body>