CSS background-clip 屬性

時間 2019-11-12

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
#example1 {
    border: 5px dotted black;
    padding:35px;
    background: #00FFFF;
}

#example2 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: padding-box;
}

#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}
</style>
</head>
<body>

<p>沒有背景剪裁 (border-box沒有定義):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

如圖：html

1. CSS content 屬性 CSS counter-increment 屬性 CSS counter-reset 屬性
2. CSS position屬性、float屬性
3. css屬性
4. CSS display屬性
5. CSS filter 屬性
6. css display:flex 屬性
7. CSS 屬性
8. css-counter屬性
9. [CSS] width 屬性
10. CSS position 屬性
更多相關文章...
• W3C CSS 活動 - W3C 教程
• CSS 指南 - 網站建設指南
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。