动画
滚动条
.line {
width: 980px;
height: 100px;
margin: 100px auto;
border-radius: 10px;
/* 线性渐变 */
background-image: linear-gradient(
135deg,
yellow 25%,
green 25%,
green 50%,
yellow 50%,
yellow 75%,
green 75%,
green 100%
);
background-size: 100px 100px;
animation: move 2s linear infinite;
}
@keyframes move {
from {
background-position: 0px;
}
to {
background-position: 100px;
}
}
背景
设置背景对齐位置
background-image: url("1.png");
background-repeat: no-repeat;
background-origin: padding-box;/* padding-box、border-box、content-box */
设置背景裁切
background: url("1.png");
background-clip: content-box;
background-clip: padding-box;
background-clip: border-box;;/* border-box、padding-box、content-box */
背景尺寸大小设置
background: url("1.jpg") no-repeat;
background-size: auto;/* auto、200px 200px、cover、contain */
边框
设置边框图片
/* 设置边框图片 */
border-image-source: url("1.png");
/* 边框裁切 */
border-image-slice: 20;
/* 设置边框平铺方式 */
border-image-repeat: stretch;
/* 设置边框宽度 */
border-image-width: 20px;
选择器
属性选择器
[属性名=值] {}
[属性名] {} /* 匹配对应的属性即可 */
[属性名^=值] {} /* 以值开头 */
[属性名*=值] {} /* 包含 */
[属性名$=值] {} /* 以值结束 */
结构伪类选择器
:first-child {} /* 选中父元素中第一个子元素 */
:last-child {} /* 选中父元素中最后一个子元素 */
:nth-child(n) {} /* 选中父元素中正数第n个子元素 */
:nth-last-child(n) {} /* 选中父元素中倒数第n个子元素 */
- tip 备注
- n 的取值大于等于0
- n 可以设置预定义的值
- odd[选中奇数位置的元素]
- even[选中偶数位置的元素]
- n 可以是一个表达式:an+b的格式
其他选择器
:target {} /* 被锚链接指向的时候会触发该选择器 */
::selection {} /* 当被鼠标选中的时候的样式 */
::first-line {} /* 选中第一行 */
::first-letter {} /* 选中第一个字符 */
过渡
过渡效果
.box {
width: 343px;
height: 200px;
background: url("1.png") no-repeat left top,rgba(0,0,0,.5) url("1.png") no-repeat right bottom;
transition: all 2s linear;
}
.box:hover {
background-position: left bottom,right top;
}