css3 background-clip属性笔记

原创 PHP笔记  2017-09-23 18:29  阅读 776 views 次

css中,background-clip属性是用来指定背景绘制区域。

background-clip属性值

  • border-box:背景绘制在边框方框内(默认值)。
  • padding-box:背景绘制在衬距方框内。
  • content-box:背景绘制在内容方框内。

语法格式:

background-clip: border-box / padding-box / content-box;

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css background-clip属性笔记</title>
<style>
#bc1 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip:border-box;
}
#bc2 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip:padding-box;
}
#bc3 {
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip:content-box;
}
</style>
<head/>
<body>
<p>background-clip:border-box演示:</p>
<div id="bc1">
<h2>background-clip属性</h2>
<p>background-clip属性的border-box属性值演示!!</p>
</div>
<p>background-clip:padding-box演示:</p>
<div id="bc2">
<h2>background-clip属性</h2>
<p>background-clip属性的padding-box属性值演示!!</p>
</div>
<p>background-clip:content-box演示:</p>
<div id="bc3">
<h2>background-clip属性</h2>
<p>background-clip属性的content-box属性值演示!!</p>
</div>
</body>
</html>

运行结果:

背景简写属性——>css background属性笔记

本文地址:https://www.ggbiji.com/css-background-clip.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情