CSS3中background背景的使用-CSDN博客

本文链接：https://blog.csdn.net/rayln/article/details/84154419

[size=medium]1. background渐变色例子:[/size]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.div2{
	width:100px;height:100px;background-image:-webkit-gradient(linear,0% 0%, 0% 100%, from(#999999), to(#333333), color-stop(0.5,#336600), color-stop(0.5,#FFFFFF));
}

</style>
</head>
<body>
	<div class="div2"></div>
</body>
</html>

[size=medium]2. background-clip裁剪区域[/size]
background-clip有三种属性:[color=red]border, padding, content.
分别指覆盖border的区域, 覆盖padding区域裁剪border. 覆盖content区域裁剪border和padding.[/color]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-clip</title>
<style>
.back{
width:120px;
height:100px;
border: 20px dashed #333; 
padding: 20px; 
background: #ccc;
-moz-background-clip:content;
-webkit-background-clip:content;
background-clip:content;}
</style>
</head>
<body>
<div class="back"></div>
</body>
</html>

[size=medium]3.background-origin背景显示开始点[/size]
同样有[color=red]border[/color](从边框开始显示背景图), [color=red]padding[/color](从padding开始背景图), [color=red]content[/color](从真正内容开始显示背景图).