background-origin 设置背景图渲染的起始位置
值
padding-box 默认值,从padding位置开始渲染
contnt-box 从内容部分开始渲染
border-box 从border开始渲染
background-size 设置背景图片的填充方式,也就是设置背景图的大小
值
cover 以最短边为基础渲染图片,长边按比例缩放,有可能无法显示全部图片
contain 以最长边为基础渲染图片,短边按比例缩放
值还可以是以下写法
background-size:宽度 高度;
如果只写一个宽度,高度按比例渲染
宽度和高度可以是具体的数值,也可以是相对于所在元素的百分比
背景蒙版 mask
1.最初只有 谷歌浏览器支持
2.背景蒙版可以把 透明图的透明部分渲染为不透明,把不透明的部分渲染为透明
3.他的设置方式和背景图的设置一致
浏览器前缀
-webkit- :是谷歌、苹果浏览器内核的前缀
-moz- :是火狐浏览器内核的前缀
-ms- : 是IE浏览器内核的前缀
-O- :欧朋浏览器内核的前缀
在css属性名之前添加 浏览器前缀,表示该css属性是浏览器的私有属性
.wp{
width: 200px;
height: 200px;
border: 1px #f00 solid;
-webkit-mask: url(../images/logo.png) no-repeat center center;
background: #04be02;
-webkit-mask-size:100% 100%;
}
box-shadow 设置阴影
box-shadow:x方向的偏移量 y方向的偏移量 阴影的发散度(模糊度) 阴影的宽度 阴影的颜色[阴影位置]
inset 设置内阴影
box-shadow: 10px 10px 20px 0 #ff0 inset
设置多组阴影,使用逗号隔开,设置的方式一样
注意:在元素上设置阴影,通常是为了增强元素的立体感,阴影不占据文档流空间,因此不会引起元素盒模型的变化
.wp,.wp2,.wp3,.wp4{
width: 200px;
height: 200px;
border: 1px #f00 solid;
margin: 50px auto;
box-shadow: 10px 10px 10px 0px #f60 inset;
}
.wp2{
background: #ff0;
border-radius: 50%;
box-shadow: 0 0 50px 10px #f00 ;
}
.wp3{
box-shadow: 0 0 50px 2px #f60 inset;
}
.wp4{
box-shadow: 10px 0 0px 0px #f00,-10px 0 0px 0px #f0f,0 -10px 0px 0px #ff0 ,0 10px 0 0 #04be02;
}
渐变
渐变,至少IE10支持
渐变也是背景图的一种
1.线性渐变
background: linear-gradient(to 方向,颜色 开始渐变的位置,颜色 开始渐变的位置,...);
linear-gradient 里面的参数
1. to 方向,方向可以使用具体的方向单词,可以使用角度度数
如果是度数,直接写具体角度,不需要加to
正值:顺时针旋转
0->向上
90->向右
180->向下
270->向左
负值:逆时针旋转
开始简便的位置可以是具体的数值,也可以是百分比
1.线性渐变
2.径向渐变
.wp{
width: 200px;
height: 200px;
border: 1px #f00 solid;
margin: 20px auto;
background: linear-gradient(215deg,#f0f 0%,#f00 30%,#ff0 60%,#04be02 100%);
}
.wp1{
width: 200px;
height: 200px;
border: 1px #f00 solid;
margin: 20px auto;
background: linear-gradient(to bottom,#000 0%,#000 33.3%,#f00 33.3%,#f00 66.6%,#ff0 66.6%,#ff0 100%);
}
.gre{
width: 400px;
height: 300px;
border: 1px #04be02 solid;
margin: 10px auto;
background: linear-gradient(to bottom,#000 0%,#000 33.33%,#f00 33.33%,#f00 66.66%,#ff0 66.66%,#ff0 100%) no-repeat;
background-size: 40px 30px;
}
.case{
height: 100px;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #04be02 20%, #04be02 100%);
background-size: 50px 50px ;
}
.case1{
/* width: 500px; */
height: 100px;
border: #000 1px solid;
margin: 0 auto;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, #04be02 20%, #04be02 30%,rgba(0,0,0,0) 30%, rgba(0,0,0,0) 50%,#04be02 50%, #04be02 60%,rgba(0,0,0,0) 60%, rgba(0,0,0,0) 80%,#04be02 80%, #04be02 90%,rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%) repeat-x 0 center;
background-size: 100px 30px ;
}
.case1{
height: 100px;
border: #000 1px solid;
margin: 0 auto;
background: #000 linear-gradient(#fff 0,#fff 50px ,tran);
}
2.径向渐变
radial-gradient 设置径向渐变
radial-gradient(半径 形状 at 圆心,颜色 渐变的开始位置,颜色 渐变的开始位置......)
形状的可选值:
1.circle 圆形,默认值,可以省略
2.ellipse
半径可以是具体的数值,也可以是如下系统给定的值:
farthest-corner 最远角
closest-corner 最近角
farthest-side 最远边
closest-side 最近边
圆心的设置
1.可以是具体的数值,第一个数值代表水平(X轴)方向,第二个值代表垂直(Y轴)方向
2.可以是 left top right bottom center 等方向名词的组合
渐变开始的位置
1.可以是具体的数值
2.可以是百分比,百分比是以半径长度为基准
.wp,.wp2,.wp3,.wp4,.wp5,.wp6,.wp7{
width: 200px;
height: 200px;
border: 1px #f00 solid;
margin: 20px auto;
background: radial-gradient(100px circle at 100px 100px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp2{
background: radial-gradient(100px at 100px 100px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp3{
background: radial-gradient(farthest-corner at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp4{
background: radial-gradient(closest-corner at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp5{
background: radial-gradient(farthest-side at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp6{
background: radial-gradient(closest-side at 20px 30px, #f00 0%,#0f0 50%,#ff0 100%);
}
.wp7{
background: radial-gradient(50px at right center, #f00 0%,#0f0 50%,#ff0 100%);
}