设置背景图片大小
background-size: length|percentage|cover|contain;
length 设置背景图像的高度和宽度。
percentage 以父元素的百分比来设置背景图像的宽度和高度。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
背景被裁剪区域
background-clip:
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
text 背景被裁剪到文本样式
背景图片的定位起点
background-origin
content-box 背景图片相对于内容定位
padding-box 背景图片相对于内边距定位
border-box 背景图片相对于边框定位
多背景
background:url(路径),url(路径),url(路径)
线性渐变
background:-webkit-linear-gradient(deg,red 25%,green 25%);
颜色 位置
deg多少度 也可以不写
径向渐变
background: -webkit-radial-gradient(circle,yellow 50px,red 50px);
颜色 位置
ellipse(椭圆)
circle(圆形)
重复线性渐变
background:-webkit-repeating-linear-gradient(-45deg,red 0px,red 10px,green 10px,green 20px);
颜色
transparent 透明
边框如何设置圆形
border-radius：50% 圆形
伪类选择器
nth-child()
nth-of-type()
带透明的颜色
rgba(0,0,0,0) 最后一个为透明度 0-1
新事件
ontimeupdate 当前位置发生改变时
onended 当播放结束时
设置倒影
-webkit-box-reflect: below 0px -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
方向 距离 可加样式
below下面 above上面 left左边 right右边
动画效果
定义动画
@keyframes 动画名{
0%/from{
}
100%/to{
}
}
动画的调用
animation: 8s test linear infinite;
时间 动画名 运动样式 无限次
滤镜
-webkit-filter: blur(20px);
数值越大越模糊
蒙版(遮罩层)
-webkit-mask:url("2.png") no-repeat; 引一个png图片
-webkit-mask-position: 300px 300px; 给png图片定位
背景阴影
box-shadow:10px 10px 10px #000;
box-shadow:x y blur #000; blur：模糊程度 数值越大越模糊
如何测试性能:
console.time(''); 参数名需要一致,必须要传参数
console.timeEnd(''); 参数名需要一致,必须要传参数
h5自定义属性：
setAttribute
getAttribute
data-前缀+属性名 浏览器不会过滤
dataset是一个json（推荐用这个）
dataset获取所有data-属性
网友评论