CSS3背景图像区域
background-clip属性
指定背景绘制区域
background-clip:border-box|padding-box|content-box;
background-clip:边框盒子|内边距盒子|内容盒子;
兼容ie9+，其他浏览器都兼容
background-origin属性
指定background-position属性应该是相对位置
兼容：ie9+，火狐4+，Safari5+
background-size
指定背景图片的大小
兼容：ie9+，火狐4+，Safari5+
CSS3渐变
兼容性：ie10+，火狐16+，Chrome26+，Safari6.1+，欧朋12.1+
线性渐变
沿着一条轴线改变颜色，从一边拉到另外一边
background:linear-gradient(direction,color-stop1,color-stop2,....)
默认从上到下渐变
background:linear-gradient(angle,color-stop1,color-stop2,....)
角度是指水平线和渐变线之间的角度，逆时针方向计算。
background: webkit-linear-gradient(angle,color-stop1,color-stop2,....)
background:linear-gradient(angle,color-stop1,color-stop2,....)
为了避免不必要的问题，这两个一般一起写。
重复渐变
比如想让后两个颜色相间重复存在
background:repeating-linear-gradient(color1 length|percentage ,color2 length|percentage...);
径向渐变
从起点到终点由内向外散开，由半径散播
background:radial-gradient(color-stop1,color-stop2...)
默认颜色节点均匀分布
background:radial-gradient(color-stop1 length|percentage ,color-stop2 length|percentage ...)
默认颜色节点不均匀分布
设置形状
background:radial-gradient(shape color-stop1,color-stop2...)
shape :circle圆形 ellipse椭圆
设置尺寸大小关键字
background:radial-gradient(size color-stop1,color-stop2...)
size：closest-side最近边 farthest-side最远边closest-corner最近角 farthest-corner最远角
径向重复渐变
background:repeating-radial-gradient(color1 length|percentage ,color2 length|percentage...);
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datalist</title>
</head>
<style type="text/css">
div{
height: 500px;
width: 500px;
background:black;
background-size:100px 100px;
background-image: -webkit-linear-gradient(45deg,red 25%,transparent 25%),
-webkit-linear-gradient(-45deg,red 25%,transparent 25%),
-webkit-linear-gradient(45deg,transparent 75%,red 75%),
-webkit-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -moz-linear-gradient(45deg,red 25%,transparent 25%),
-moz-linear-gradient(-45deg,red 25%,transparent 25%),
-moz-linear-gradient(45deg,transparent 75%,red 75%),
-moz-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: -o-linear-gradient(45deg,red 25%,transparent 25%),
-o-linear-gradient(-45deg,red 25%,transparent 25%),
-o-linear-gradient(45deg,transparent 75%,red 75%),
-o-linear-gradient(-45deg,transparent 75%,red 75%);
background-image: linear-gradient(45deg,red 25%,transparent 25%),
linear-gradient(-45deg,red 25%,transparent 25%),
linear-gradient(45deg,transparent 75%,red 75%),
linear-gradient(-45deg,transparent 75%,red 75%);
}
</style>
<body>
<div>
</div>
</body>
</html>
image.png
网友评论