CSS3核心

@ 姜波 | 星期二，七月 16 日，2019 年 | 2 分钟阅读 | 更新于 星期二，七月 16 日，2019 年

<div class="line"></div>

.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个子元素 */

: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;
}