一、背景相关属性
Background-color
Background-image
Background-repeat
Background-position
Backgroound-attachment
Background-size
Background 可以同时添加多张背景图片，如果有颜色，颜色搁在最后一个背景图片的前面
Background-origin背景起源，背景原点位置
Backgroufn-clip裁剪，裁剪某个位置
属性值： border-box content-box padding-box
#box{
height: 400px;
width: 400px;
border: solid 1px;
/* vertical-align: -100px;; */
/*
background-image: url(./img/1.jpg); */
/* background-image: url(./img/9.jpg); */
/* background-repeat: no-repeat;
background-size: 100px;
background-position: center; */
background:url(./img/1.jpg) right top no-repeat,
rgba(0,0,0,.5) url(./img/9.jpg) 0 100% no-repeat;
background-size: 100px,50px;
}
#box2{
height: 200px;
width: 200px;
padding: 50px;
border:solid 50px red;
/* vertical-align: 100px; */
background:url(./img/1.jpg) no-repeat 50% 50%/100% 100%;
/* background-origin: content-box;设置背景原点从内容开始*/
background-origin: padding-box; /*默认，含padding */
/* background-origin: border-box; 设置背景原点从边框开始 */
/* background-clip: border-box; */
/* background-clip: padding-box; */
background-clip: content-box;
}
1
二、阴影
2.1 盒子阴影
Box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影大小 阴影颜色 阴影位置;
<style>
.sun{
height: 100px;
width: 100px;
border-radius: 50%;
background: red;
box-shadow: 0 0 6px 8px orange,
0 0 10px 12px yellow;
position: fixed;
top: 50px;
left: 100px;
}
.cloud{
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
box-shadow:40px -30px 0px 4px white, 96px 2px 0px 8px white, -29px -14px 0px 4px white;
position: fixed;
top: 250px;
left:400px;
}
</style>
</head>
<body bgcolor="#e7e7e7">
<div class="sun"></div>
<div class="cloud"></div>
</body>
1
2.2 文本阴影
Text-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影颜色;
p{
text-shadow: 2px 2px 2px black;
}
1
三、渐变色（属性值）
2.1 线性渐变 linear-gradient()
需要给多个颜色值，默认从上往下渐变，可以设置渐变的方向：
两种方式：
Left从哪边开始
To right 向哪边渐变
注意：CSS3属性需要做浏览器兼容
-webkit-谷歌或者苹果
-ms- IE
-moz-火狐
-o-欧朋
div.box1{
height: 200px;
width: 100%;
background-image: -webkit-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Safari 5.1 to 6.0 */
background-image: -moz-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Firefox 3.6 to 15 */
background-image: -o-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Opera 11.1 to 12.0 */
background-image: linear-gradient(to right bottom,red,orange,green,lightgreen,blue);/*标准语法*/
}
div.box2{
height: 400px;
width: 400px;
margin-left: 200px;
border: solid 1px;
background-image: linear-gradient(to left bottom,blue 20%,red 40%,yellow,green,gray,pink,purple);
}
1
2.2 径向渐变 radial-gradient()
确定圆的类型
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
div.box3{
width: 600px;
/* background-image: radial-gradient(circle,red,blue,green,orange,yellow,pink,purple); */
background-image: radial-gradient(circle at top,red 5%,blue 10%,green 15%,orange 20%,yellow 30%,pink 50%,purple 80%);
}
1
三、变形transform
值函数：
Translate(x,y)偏移，两个参数分别为x方向和y方向偏移；如果只有一个值，就是代表向x偏移
translateX(x)
translateY(y)
background: red;
/* margin-top: 100px; */
/* position: relative;*/
/* position: fixed; */
/* position: absolute;
top: 100px; */
/* 向下偏移100px */
/* transform: translateY(100px); */
/*向右偏移200px*/
/* transform: translateX(200px); */
/* 同时设置向下偏移100px向右偏移200px */
/* transform: translate(200px,100px) */
transform: translate(100px);
1
Scale(x,y) 缩放，两个参数分别为x方向和y方向缩放值；如果只有一个值，代表元素两个方向的缩放值
ScaleX(x)
scaleY(y)
/* width: 1px; */
display: inline-block;
margin-left: 400px;
background: pink;
/* x方向缩小一半 */
/* transform: scaleX(0.5); */
/* y方向变大一半 */
/* transform: scaleY(2); */
/* 设置x、y方向的缩放值 */
/* transform: scale(0.9,0.5); */
transform: scale(0.5);
1
倾斜 skew(x deg);
skewX()
skewY()
display: inline-block;
height: 400px;
margin-left: 200px;
background: orange;
/* x方向倾斜30deg */
/* transform: skewX(30deg); */
/* y方向倾斜30deg */
/* transform: skewY(60deg); */
transform: skewX(30deg);
1
旋转rotate(z deg)平面旋转
RotateX() x轴旋转
rotateY() y轴旋转
rotateZ() z旋转，平面旋转
display: inline-block;
height: 400px;
margin-left: 200px;
background: green;
/* x轴旋转30deg */
/* transform: rotateX(30deg); */
/* y轴旋转30deg */
/* transform: rotateY(60deg); */
transform: rotateZ(60deg)
1
四、过渡transition
过渡是从一种效果到另外一种效果的演变，需要触发条件
两个必要的条件：
过渡属性 transition-property
过渡的时间transition-duration
除了以上两个属性：
过渡的作用曲线 transition-timing-function
过渡的延迟时间 transition-delay
#wrap{
height: 200px;
width: 200px;
margin: 200px auto;
border: solid 1px;
background: yellow;
/* 设置过渡的必要条件 */
/* 条件一：过渡的属性 */
/* -webkit-transition-property: transform;
-moz-transition-property: transform;
-o-transition-property: transform;
transition-property: transform; */
/* 条件二：过渡的时间 */
/* -webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
transition-duration: 5s; */
/* 延迟过渡 */
/* -webkit-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
transition-delay: 2s; */
/* 过渡的速率 */
/* -webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear; */
/* 简写属性 all代表过渡所有属性 贝塞尔曲线*/
-moz-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
-o-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
-webkit-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;
}
#wrap:hover{
transform: scale(2);
background: red;
}
1
过渡案例：
1，2，3....
1
五、动画animation
从一种效果过渡到另外一种，这个不需要任何触发条件，自动播放；
两个必要条件：
过渡的名称 animation-name
过渡的时间 animation-duration
其他属性：
过渡的速率 animation-timing-function
延迟过渡的时间 animation-delay
播放次数 animation-iteration-count
动画播放顺序 animation-direction
动画集规则@keyframes name{ from ... to}
由于form...to 过渡效果太少，一般我们会利用百分比 0% ， 10%，...,90%,100%
.wrap{
height: 400px;
width: 400px;
margin: 100px auto;
/* border: solid 1px; */
position: relative;
}
.circle{
height: 40px;
width: 40px;
background: red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 动画的两个必要条件 */
/* 动画过渡的名称 */
animation-name: myBall;
/* 动画过渡的时间 */
animation-duration: 5s;
/* 设置播放次数 */
animation-iteration-count: infinite;
/* 设置播放的顺序 alternate奇数次正向播放 偶数次反向播放*/
animation-direction: alternate;
/* 延迟两秒播放 */
animation-delay: 2s;
/* 播放速率 ease ease-in ease-out ease-in-out linear 贝塞尔曲线*/
animation-timing-function: linear;
}
/* 声明动画集规则 */
@keyframes myBall{
from{transform: scale(0)}
to{transform: scale(10)}
}
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程
