《CSS揭秘》学习笔记

function $$(selector,context){
  context = context || document;
  var elements = context.querySelectorAll(selector);
  return Array.prototype.slice.call(elements);
}

function testProperty(property){
  var root = document.documentElement;
  if (property in root.style){
    root.classList.add(property.toLowerCase());
    return true;
  }
  root.classList.add('no-' + property.toLowerCase());
  return false;
}

function testValue(id,value,property)(){
  var dummy = document.createElement("p");
  dummy.style[property] = value;
  if (dummy.style[property]){
    root.classList.add(id);
    return true;
  }
  root.classList.add('no-' + id);
  return false;
}

font-size: 20px;
line-height: 30px;
--------升级-----------
font-size: 20px;
line-height: 1.5;
--------升级-----------
font-size: 125%;/*假设父级字号是16px*/
line-height: 1.5;

padding: 6px 16px;
border: 1px solid #446d88;
background: #58a line-gradient(#77a0bb,#58a);
border-radius: 4px;
box-shadow: 0 1px 5px gray;
color: white;
text-shadow: 0 -1px 1px #335166;
font-size: 20px;
line-height: 30px;
--------升级-----------
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a line-gradient(#77a0bb,#58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
--------升级-----------
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a line-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
font-size: 125%;
line-height: 1.5;

button.cancel{
  background-color: #c00;
}
button.ok{
  background-color: #6b0;
}

hr{
  height: .5em;
  background: currentColor;
}

input,button{font: inherit;}

background: rebeccapurole;
background-color: rebeccapurole;

ul{ --accent-color: purple;}
ol{ --accent-color: rebeccapurole;}
li{ background: var(--accent-color);}

border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box;

background: yellowgreen;
box-shadow: 0 0 0 10px #655,

box-shadow: 0 0 0 10px #655,
   		    0 0 0 15px deeppink,
            0 2px 5px 15px rgba(0,0,0,.6);

#div1{
    display: inline-block;
    color: white;
    text-align: center;
    width: 100px;
    height: 60px;
    margin: 25px 25px;
    background: yellowgreen;
    border: 10px solid #655;
    outline: 5px dashed deeppink;
}

#div2{
    display: inline-block;
    color: white;
    text-align: center;
    width: 100px;
    height: 60px;
    margin: 25px 25px;
    background: black;
    border: 10px solid black;
    outline: 1px dashed white;
    outline-offset: -5px;
}

#div3{
    display: inline-block;
    color: white;
    text-align: center;
    width: 100px;
    height: 60px;
    margin: 25px 25px;
    background: yellowgreen;
    border: 10px solid #655;
    border-radius: 15px;
    outline: 5px solid deeppink;
}

 background: url(http://csssecrets.io/images/code-pirate.svg)
    no-repeat #58a;
 background-position: right 20px bottom 10px;

 background: url(http://csssecrets.io/images/code-pirate.svg)
    no-repeat bottom right #58a;
 background-position: right 20px bottom 10px;

  background: url(http://csssecrets.io/images/code-pirate.svg)
    no-repeat bottom right #58a;
  background-position: calc(100% - 20px) calc(100% - 10px);

outline: .6em solid #655;
box-shadow: 0 0 0 .4em #655; /* todo calculate max of this */
border-radius: .8em;
padding: 1em;
background: tan;

  background: linear-gradient(to right, #fb3 50%, #58a 0);
  /*或者这样写*/
  /*background: linear-gradient(90deg, #fb3 50%, #58a 0);*/
  background-size: 30px 100%;

   background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
    background-size: 42px 42px;

background: repeating-linear-gradient(45deg, #fb3 0, #fb3 15px, #58a 0, #58a 30px);

 background: #58a;
 background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1) 0, hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);
---------等同于---------
background: repeating-linear-gradient(30deg, #79b 0, #79b 15px, #58a 0, #58a 30px);

 	background: white;
    background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%,  transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,  transparent 0);
    background-size: 30px 30px;
----------改进版，可方便的改变网格尺寸、线宽、颜色----------
  	background: #5588aa;
    background-image: linear-gradient( white 1px,  transparent 0),linear-gradient(90deg,white 1px,  transparent 0);
    background-size: 30px 30px;

	background: #655;
    background-image: radial-gradient(tan 30%, transparent 0),
                      radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
    background-position: 0 0,15px 15px;

@mixin polka($size,$dot,$base,$accent){
  	background: $base;
    background-image: radial-gradient($accent $dot, transparent 0),
                      radial-gradient($accent $dot, transparent 0);
    background-size: $size $size;
    background-position: 0 0,$size/2 $size/2;
}

background: hsl(20,40%,90%);
background-image: linear-gradient(90deg, #fb3 10px,  transparent 0),
                  linear-gradient(90deg, #ab4 20px,  transparent 0),
                  linear-gradient(90deg, #655 20px,  transparent 0);
 background-size: 41px 100%,61px 100%,83px 100%;
 width: 300px;
 height: 100px;
 margin: 2em 2em;

.div3{
    background: url(http://csssecrets.io/images/stone-art.jpg);
    background-size: cover;

    /* Styling & enable resize */
    width: 21em;
    padding: 1em;
    overflow: hidden;
    resize: both;
    font: 100%/1.6 Baskerville, Palatino, serif;
    margin: 5em 5em;
}
.div3 > div{
    background: white;
    padding: 1em;
}

<div class="div3"><div>i am a man</div></div>

    padding: 1em;
	border: 1em solid transparent;
    background: linear-gradient(white , white),
                url(http://csssecrets.io/images/stone-art.jpg);
    background-size: cover;
    background-clip: padding-box,border-box;
    background-origin: border-box

@keyframes div5 {
    to {background-position: 100%}
}
.div5{
    border: 1px solid transparent;
    background: linear-gradient(white , white) padding-box,
                 repeating-linear-gradient(-45deg ,
            black 0,black 25%,
            white 0,white 50%)
    0 / .6em .6em;
    animation: div5 12s linear infinite;

    /* Styling & enable resize */
    width: 21em;
    padding: 1em;
    font: 100%/1.6 Baskerville, Palatino, serif;
    margin: 5em 5em;
}

border-top : .2em solid transparent; 
border-image : 100% 0 0 linear-gradient(90deg, currentColor 4em, 				   transparent 0); 
padding-top : 1em;

.button2 {
    position: relative;
    color: white;
    font: bold 200%/1 sans-serif;
    padding: .5em 1em;
    border: 0;
}

.button2::before {
    content: "";	/*用伪元素生成一个矩形*/
  
    /*偏移量设置为0，以便让伪元素在水平和垂直方向上都被拉伸至宿主元素的尺寸*/
  	position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
    z-index: -1;/*伪元素生成的方块位于内容之上，设置z-index后会推到宿主元素之后*/
    background: #5588aa;
    transform: skew(45deg);
}

.div1 {
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
    overflow: hidden;
    margin: 100px;
}

.div1 img{
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
    z-index: -1;
    position: relative;
}

<div class="div1">
    <img src="http://csssecrets.io/images/adamcatlace.jpg" />
</div>

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

.img2{
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
}

.img2:hover{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

 background: #5588aa;
 background: linear-gradient(45deg, white 15px,#5588aa 0);

    background: #5588aa;
    background: linear-gradient(135deg, white 15px,#5588aa 0) top left,
                linear-gradient(-135deg, white 15px,#5588aa 0) top right,
                linear-gradient(-45deg, white 15px,#5588aa 0) bottom right,
                linear-gradient(45deg, white 15px,#5588aa 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

  background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
              radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
              radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
              radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;

border: 21px solid transparent;
border-image: 1 url('data:image/svg+xml,\
	                      <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
	                      <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
	                      </svg>');
 background: #58a;
 background-clip: padding-box;

    background: #58a;
    clip-path:
            polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%, 0 calc(100% - 20px), 0 20px);

.div1{
    height: 50px;
    width: 100px;
    color: white;
    position: relative;
    line-height: 50px;
    margin: 5em 5em;
    text-align: center;
}

.div1::before{
    content: "";
    position: absolute;
    top: 0;right: 0;left: 0;bottom: 0;
    z-index: -1;
    background: #5588aa;
    transform: perspective(.5em) rotateX(5deg) scaleY(1.3);
    transform-origin: bottom;
}

.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;	/*背景元素与宿主元素保持一致,比率超过50%时改成棕色*/
    transform-origin: left;	/*伪元素圆形的圆形旋转，还可以写成transform-origin: 0 50%*/
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}

box-shadow: 0 5px 4px -4px rgba(0,0,0,5);

box-shadow: 3px 3px 6px -3px rgba(0,0,0,5);

box-shadow: 5px 0 5px -5px rgba(0,0,0,5),
			-5px 0 5px -5px rgba(0,0,0,5);

filter: blur() grayscale() drop-shadow();

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

filter: sepia();

filter: sepia(1) saturate(4) hue-rotate(295deg);

main {
    position: relative;
    margin: 0 auto;
    padding: 1em;
    max-width: 23em;
    background: hsla(0,0%,100%,.25) border-box;
    overflow: hidden;
    border-radius: .3em;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
    0 .5em 1em rgba(0, 0, 0, 0.6);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}

main::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: -30px; /*为了让边缘不出现逐渐消退的效果，需要让伪元素 相对其宿主元素的尺寸再向 外扩大 至少 20px （即它的模糊半径）。由于不同浏览器的模糊算法可能存在差异， 用一个更大的绝对值（比 如 -30px ）会更保险一些。*/
  
    z-index: -1;/*把伪元素移动到宿主元素后面*/
  
    -webkit-filter: blur(20px);/*设置伪元素模糊效果*/
    filter: blur(20px);
}

body, main::before {	/*第二张图是去掉body的效果*/
    background: url("http://csssecrets.io/images/tiger.jpg") 0 / cover fixed;	/*把伪元素和body背景设置为相同的图片，因为main元素有overflow: hidden;所以超出main元素大小的部分会被剪裁掉*/
}

  	background: #58a; /* Fallback */
    background:
            linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
            linear-gradient(-135deg, transparent 1.5em, #58a 0);

.div5 {
    position: relative;
    background: #5588aa;
    background:
                linear-gradient(-150deg,transparent 1.5em,#5588aa 0);
    border-radius: .5em;
    margin-top: 2em;
    width: 12em;
    font: 100%/1.6 Baskerville, Palatino, serif;
    padding: 2em;
    color: white;
}

.div5::before{
    content: '';
    position: absolute;
    top: 0;right: 0;
    background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
  
  /*移动并旋转伪元素与切角对齐*/
    transform: translateY(-1.3em) rotate(-30deg);
  
  /*让三角形的右下角成为旋转中心，方便计算便宜距离*/
    transform-origin: bottom right;
  
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

hyphens: auto;

dt, dd {
    display: inline;
    margin: 0;
}

dd {
    font-weight: 600;
}

dd + dt::before {
    content: "\A";
    white-space: pre;
}

dd + dd::before {
    content: ', ';
    font-weight: normal;
    margin-left: -.25em;
}

body {
    font: 150%/1.6 Baskerville, Palatino, serif;
}

<dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>

    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dd>leaverou@mit.edu</dd>

    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

pre {
    padding: .5em;
  
  /*创建出水平条纹背景。它的background-size需要设置为line-height的两倍，因为每个背景贴片需要覆盖两行代码。*/
    line-height: 1.5em;
  
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(
            rgba(120,0,0,.1) 50%, transparent 0);
    background-size: auto 3em;
  
  /*让背景自动跟着内边距的宽度走*/
    background-origin: content-box;
  
    font-family: Consolas, Monaco, monospace;
}

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;

@font-face { 
  font-family: Ampersand; 
  src: local ('Baskerville'), 
       local ('Goudy Old Style'),
       local ('Garamond'), 
       local ('Palatino'); 
}

unicode-range : U+26;

"&".charCodeAt(0).toString(16); // 返回26

@font-face {
    font-family: Ampersand;
    src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
    unicode-range: U+26;
}

h1 {
    font-family: Ampersand, Helvetica, sans-serif;
}

a {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 1.02em;
    text-shadow: .05em 0 white, -.05em 0 white;
}

background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x; background-size: .2em 2px;
background-position: 0 1em;

    background: deeppink;
    color: white;
    text-shadow: 1px 1px black, -1px -1px black,
                 1px -1px black,-1px 1px black;

    background: deeppink;
    color: white;
    text-shadow: 0 0 1px black, 0 0 1px black,
                 0 0 1px black, 0 0 1px black,
                 0 0 1px black, 0 0 1px black;

h1{
    font: 500%/1 Rockwell, serif;
    background: deeppink;
    color: white;
}

h1 text{
    fill: currentcolor;
}

h1 svg{
    overflow: visible;
}

h1 use{
    stroke: black;
    stroke-width: 6;
    stroke-linejoin: round;
}

<h1>
    <svg width="2em" height="1.2em">
        <use xlink:href="#css"/>
        <text id="css" y="1em">css</text>
    </svg>
</h1>

.p1 {
    font: 250%/1.6 Baskerville, Palatino, serif;
    background: #203;
    color: white;
    transition: 1s;
}

.p1:hover{
    text-shadow: 0 0 .1em, 0 0 .3em;
}

.span3 {
    font: 250%/1.6 Baskerville, Palatino, serif;
    background: #203;
    color: white;
    transition: 1s;
}

.span3:hover{
    filter: blur(.1em);
}

.p1 {
    font: 250%/1.6 Baskerville, Palatino, serif;
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
                 0 2px hsl(0,0%,80%),
                 0 3px hsl(0,0%,75%),
                 0 4px hsl(0,0%,70%),
                 0 5px hsl(0,0%,65%),
                 0 5px black;
}

<div class="circular">
    <svg viewBox="0 0 100 100">
        <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/>
        <text>
            <textPath xlink:href="#circle">
                circular reasoning works because
            </textPath>
        </text>
    </svg>
</div>

.circular path {
    fill: none;
}

.circular {
    width: 30em;
    height: 30em;
  
  /*把 SVG 元素自身往下推*/
    margin: 3em auto 0;
}

.circular svg {
    display: block;
  
  /*取消把溢出内容裁切效果*/
    overflow: visible;
}

<div class="circular" >
  circular reasoning works because 
</div>

$$('.circular').forEach(function (el) {
    var NS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    var svg = document.createElementNS(NS, "svg");
    var circle = document.createElementNS(NS, "path");
    var text = document.createElementNS(NS, "text");
    var textPath = document.createElementNS(NS, "textPath");
    svg.setAttribute("viewBox", "0 0 100 100");

    circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
    circle.setAttribute("id", "circle");

    textPath.textContent = el.textContent;
    textPath.setAttributeNS(xlinkNS, "xlink:href", "#circle");

    text.appendChild(textPath);
    svg.appendChild(circle);
    svg.appendChild(text);
    el.textContent = '';
    el.appendChild(svg);

});

:disabled , [ disabled ], [ aria - disabled ="true"] { 
    cursor : not-allowed; 
}

 	border: 10px solid transparent;
   
	/*把背景限制在原本的区域内*/
    background: #58a;

    background-clip: padding-box;

	/*用box-shadow模拟边框*/
    box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;

.button1 {
    position: relative;
    padding: .3em .5em;
    background: #58a;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.3);
    box-shadow:  0 .1em .2em -.05em rgba(0,0,0,.5);
    color: white;
    font: bold 150%/1 sans-serif;
    cursor: pointer;
}

.button1:before {
    content: '';
    position: absolute;
  
  /*伪元素在四个方向上都比宿主元素大出10px*/
    top: -10px; right: -10px;
    bottom: -10px; left: -10px;
}

input[type="checkbox"] {
  /*隐藏原始的复选框，不能使用display: none，这样会把它从tab键切换焦点的队列完全删除*/
    position: absolute;
    clip: rect(0,0,0,0);
}

/*设置紧邻input的label伪元素样式*/
input[type="checkbox"] + label::before {
    content: '\a0';
    display: inline-block;
    vertical-align: .2em;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: .2em;
    background: silver;
    text-indent: .15em;
    line-height: .65;
}

/*设置紧邻已经勾选的input的label伪元素的样式*/
input[type="checkbox"]:checked + label::before {
    content: '\2713';
    background: yellowgreen;
}

input[type="checkbox"]:focus + label::before {
    box-shadow: 0 0 .1em .1em #58a;
}

input[type="checkbox"]:disabled + label::before {
    background: gray;
    box-shadow: none;
    color: #555;
    cursor: not-allowed;
}

<input type="checkbox" id="awesome" autofocus />
<label for="awesome">Awesome!</label>

input[type="checkbox"] {
    position: absolute;
    clip: rect(0,0,0,0);
}

input[type="checkbox"] + label {
    display: inline-block;
    padding: .35em .5em .2em;
    background: #ccc;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px white;
    cursor: pointer;
}

input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
    box-shadow: .04em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

<input type="checkbox" id="awesome" autofocus />
<label for="awesome">Awesome!</label>

/*用于遮挡背景*/
.overlay{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.8);
}

/*需要吸引用户注意的元素*/
.lightbox {
    position: absolute;
    z-index: 1;
    top: 50%; left: 50%;
    margin: -200px;
}

.lightbox::before {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .8);
}
.lightbox {
    position: absolute;
    z-index: 1;
    top: 50%; left: 50%;
    margin: -200px;
}

.lightbox {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -200px;
    box-shadow: 0 0 0 50vmax rgba(0, 0, 0, .8);
}

dialog::backdrop {
    background: rgba(0,0,0,.8)
}

<button onclick="document.querySelector('#modal').showModal()">Click me</button>
<dialog id="modal">
    O HAI!
    <button onclick="this.parentNode.close()">Close</button>
</dialog>

<main>.....</main>
<dialog>o hai</dialog>

main.de-emphasized {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
main {
    transition: .6s;
    background: white;
}

filter: blur(3px) contrast(.8) brightness(.8);

ul {
  /*基本样式，让ul的高度小于内容的高度*/
    display: inline-block;
    overflow: auto;
    width: 7.2em;
    height: 7em;
    border: 1px solid silver;
    padding: .3em .5em;
    list-style: none;
    margin-top: 2em;
    font: 100 200%/1.6 'Frutiger LT Std', sans-serif;
}

.ul1 {
  /*通过径向渐变生成顶部的阴影，但是生成的阴影出现的时机和我们期望的相反*/
    background: radial-gradient(at top,rgba(0,0,0,.2), transparent 70%) no-repeat;
    background-size: 100% 15px;
    background-attachment: local;
}
----------进化----------
.ul2 {
  /*通过线性渐变生成白色矩形来遮挡阴影*/
    background: linear-gradient(white,white),
            radial-gradient(at top,rgba(0,0,0,.2), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-attachment: local,scroll;
}
----------进化----------
.ul3 {
  /*生成底部的阴影和遮挡矩形，并且把白色矩形的渐变颜色改成linear-gradient(white,hsla(0,0%,100%,0))，这样可以让阴影的显现变得平滑*/
    background: linear-gradient(white 15px, hsla(0,0%,100%,0)) 0 0 / 100% 50px,
    radial-gradient(at top, rgba(0,0,0,.2), transparent 70%) 0 0 / 100% 15px,
    linear-gradient(to top, white 15px, hsla(0,0%,100%,0)) bottom / 100% 50px,
    radial-gradient(at bottom, rgba(0,0,0,.2), transparent 70%) bottom / 100% 15px;

    background-repeat: no-repeat;
    background-attachment: local, scroll, local, scroll;
}

<body>
<div class="image-slider">
    <div><img src="http://csssecrets.io/images/adamcatlace-before.jpg" alt="Before" /></div>
    <img src="http://csssecrets.io/images/adamcatlace.jpg" />
</div>

.image-slider1 {
    position:relative;
    display: inline-block;
}

.image-slider1 > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%;/*设置初识宽度*/
    overflow: hidden;/*剪裁图片*/
    resize: horizontal;/*动态改变宽度*/
}

.image-slider1 img {
    display: block;
}

.image-slider2 > div:before {
    content: '';
    position: absolute;
    right: 0; bottom: 0;
    width: 12px; height: 12px;
    padding: 5px;
    background: linear-gradient(-45deg, white 50%, transparent 0);
    background-clip: content-box;
    cursor: ew-resize;
    -webkit-filter: drop-shadow(0 0 2px black);
    filter: drop-shadow(0 0 2px black);
}

<div class="image-slider3">
    <img src="http://csssecrets.io/images/adamcatlace-before.jpg" alt="Before" />
    <img src="http://csssecrets.io/images/adamcatlace.jpg" alt="After" />
</div>

$$('.image-slider3').forEach(function (slider) {
    //创建附加的div元素，并用它包裹住第一个图片元素
    var div = document.createElement("div");
    var img = slider.querySelector("img");
    slider.insertBefore(div,img);
    div.appendChild(img);

    //创建滑块
    var range = document.createElement("input");
    range.type = 'range';
  	//滑块和div宽度绑定
    range.oninput = function () {
        div.style.width = this.value + "%";
    };
    slider.appendChild(range);
});

function $$(selector, context) {
    context = context || document;
    var elements = context.querySelectorAll(selector);
    return Array.prototype.slice.call(elements);
}

.image-slider3 {
    position:relative;
    display: inline-block;
}

.image-slider3 > div {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%;/*设置初识宽度*/
    overflow: hidden;/*剪裁图片*/
}

.image-slider3 img {
    display: block;
    user-select: none;
}
.image-slider3 input{
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    margin: 0;
}

.image-slider3 input{
    position: absolute;
    left: 0;
    bottom: 10px;
    /*width: 100%;*/
    margin: 0;

    width: 50%;
    filter: contrast(.5);
    mix-blend-mode: luminosity;
    transform: scale(2);
    transform-origin: left bottom;
}

<p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p>
<figure>
    <img src="http://csssecrets.io/images/adamcatlace.jpg" />
    <figcaption>
        The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
    </figcaption>
</figure>
<p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p>

figure {
    max-width: 300px;/*为了向下兼容*/
    max-width: min-content;
    margin: auto;
}

figure > img { max-width: inherit }

/* Basic styling */

figure {
    padding: 10px;
    border: 1px solid silver;
}

table{
  table-layout: fixed;
  width: 100%;
}

li:first-child:nth-last-child ( 4 ), li:first-child:nth-last-child ( 4 ) ~ li { /* 当列表正好包含四项时，命中所有列表项 */ }

li:first-child:nth-last-child ( n + 4 ), li:first-child:nth-last-child ( n + 4 ) ~ li { /* 当列表至少包含四项时，命中所有列表项 */ }

li:first-child:nth-last-child ( -n + 4 ), li:first-child:nth-last-child ( -n + 4 ) ~ li { /* 当列表最多包含四项时，命中所有列表项 */ }

li:first-child:nth-last-child ( n + 2 ) :nth-last-child ( -n + 4 ), li:first-child:nth-last-child ( n + 2 ) :nth-last-child ( -n + 4 ) ~ li { /* 当列表包含2～4项时，命中所有列表项 */ }

<footer>
	<div class="wrapper">
	<!--内容-->
	</div>
</footer>
      
footer {
  background: #333;
}
.wrapper {
  max-width:900px;
  margin:1em auto;
}
-------升级-------
<footer>
	<!--内容-->
</footer>

footer {
  max-width: 900px;/*这一行声明注释掉没影响，因为当内边距是 50% - 450px 时，只可能给内容留出 900px （2× 450px ）的可用空 间。 只有把 width 显式地设置为 900px 之外（或大或小）的其他值， 我们 才有可能看出区别。由于我们想要得到的内容宽度本来就是 900px ，这一行 声明其实就是冗余的，我们可以把它去掉*/

  padding: 1em calc(50% - 450px);
  background: #333;
}
-------升级-------
<footer>
	<!--内容-->
</footer>

footer {
  padding: 1em;	/*向后兼容，避免浏览器不支持calc()函数*/
  padding: 1em calc(50% - 450px);
  background: #333;
}

.main1 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -5em; /*6/2=3*/
  margin-left: -9em; /*18/2=9*/
  width: 18em;
  height: 10em;
}
-------升级-------
.main1 {
    position: absolute;
    left: calc(50% - 9em);
    top: calc(50% - 5em);
    width: 18em;
    height: 10em;
}

.main1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main2 {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translate(-50%,-50%);
}

body{
    display: flex;
    min-height: 100vh;
    margin: 0;
}

main {
    margin: auto;
}

<main>Center me,please!</main>

main { 
  display : flex; 
  align-items : center; 
  justify-content : center; 
  width : 18em; 
  height : 10em; 
}

<header>
    <h1>Site name</h1>
</header>
<main>
    <input type="checkbox" id="contents" /><label for="contents">Toggle contents</label>
    <p>Bacon ipsum dolor ....</p>
</main>
<footer>
    <p>© 2015 No rights reserved.</p>
    <p>Made with ♥ by an anonymous pastafarian.</p>
</footer>

main { 
  min-height : calc(100vh - 2.5em - 7em); 
  /* 避免内边距或边框搞乱高度的计算： */ 
  box-sizing : border-box; 
}

#wrapper { 
  min-height: calc(100vh - 7em); 
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
  flex: 1;
}

@keyframes bounce {
    60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease-out;
    }
    70% { transform: translateY(300px); }
    90% { transform: translateY(360px); }
}

.ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 2s ease-in ;
}

@keyframes bounce {
    60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease;
    }
    70% { transform: translateY(300px); }
    90% { transform: translateY(360px); }
}

.ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
}

<label>
    Your username:
    <input value="leaverou"></input>
    <span class="callout">
	Only letters, numbers, underscores (_) and hyphens (-) allowed!
	</span>
</label>

input:not(:focus) + .callout {
    transform: scale(0);
}

.callout {
    transition: .5s transform;
    transform-origin: 1.4em -.4em;
}
---------升级到弹性过渡---------
@keyframes elastic-grow {
    from {transform: scale(0)}
    70% {
        transform: scale(1.1);
        animation-timing-function: cubic-bezier(.1,.25,1,.25);
    }
}

input:not(:focus) + .callout:not(:hover) {
    transform: scale(0);
}

input:focus + .callout {
    animation: elastic-grow .5s;
}

input:not(:focus) + .callout {
    transform: scale(0);
}
.callout {
    transition: .5s cubic-bezier(.25,.1,.3,1.5);
    transform-origin: 1.4em -.4em;
}

input:not(:focus) + .callout {
    transform: scale(0);
  	transition-timing-function: ease;
}
.callout {
    transition: .5s cubic-bezier(.25,.1,.3,1.5);
    transform-origin: 1.4em -.4em;
}

input:not(:focus) + .callout {
    transform: scale(0);
  	transition: .25s;
}
.callout {
    transition: .5s cubic-bezier(.25,.1,.3,1.5);
    transform-origin: 1.4em -.4em;
}

input:not(:focus) + .callout {
    transform: scale(0);
  	transition: .25s transform;
}
.callout {
    transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
    transform-origin: 1.4em -.4em;
}

<div class="loader">Loading…</div>

@keyframes loader {
    to { background-position: -800px 0; }
}

.loader {
    width: 100px; height: 100px;
    animation: loader 1s infinite linear;
    text-indent: 999px; overflow: hidden; /* Hide text */
    background: url(http://dabblet.com/img/loader.png) 0 0;
}

.loader {
    width: 100px; height: 100px;
    text-indent: 999px; overflow: hidden; /* Hide text */
    background: url(http://dabblet.com/img/loader.png) 0 0;
    animation: loader 1s infinite steps(8);
}

@keyframes blink-1 { to { color: transparent } }

.blink-smooth-1 {
    animation: 1s blink-1 3;
}
----------升级----------
@keyframes blink-2 { 50% { color: transparent } }

.blink-smooth-2 {
    animation: 1s blink-1 3;
}

@keyframes blink-2 { to { color: transparent } }

.blink-smooth-2 {
    animation: .5s blink-1 6 alternate;
}