第一章简介DRY（不要自己重复）代码容易维护代码少不能兼得border-width:10px10px10px0;/**better**/border-width:10px;border-left-width:0;currentColor/**让水平分割线自动匹配文字的颜色**/hr{height:1px;background:currentColor;}继承可以用在任何CSS属性中，它总是绑定到父元素的计算值（或者，对于伪元素，生成伪元素的宿主元素）。第二章背景与边框1.半透明边框border:10pxsolidhsla(0,0%,100%,.5);背景：白色；背景剪辑：填充框；2.Multipleborderbox-shadowscheme：只能模拟borderbackground:yellowgreen；盒子阴影：00010px#655,00015pxdeeppink,02px5px15pxrgba(0,0,0,.6);outlinescheme：仅适用于双层Borderbackground:yellowgreen;border:10pxsolid#655;outline:5xsoliddeeppink;outline-offset:0px;//距元素边缘的距离，取负值3.灵活的背景定位background-position的扩展语法：指定背景图像距任意角的偏移量，指定偏移量前的关键字。/**bottomright是浏览器不支持时的回退方案**/background:url('xx.png')no-repeatbottomright#655;background-position:right20pxbottom10px;background-originscheme:padding:20px10px;background:url('xx.png')no-repeat#58abottomright;background-origin:content-box;/*默认填充框*/calc方案：background:url('xx.png')no-repeat;background-position:calc(100%-20px)calc(200%-10px);4.边框背景内圆角：棕褐色；边界半径：.8em；填充：1em；盒子阴影：000.6em#655；大纲：.6em实心#655；5.条纹背景background:linear-gradient(#fb350%,#58a50%);背景大小：100%30px；第三章形状1.Ellipseborder-radius:50%;/*自适应椭圆*/border-radius:100%00100%/50%;/*半个椭圆*/border-raius:100%000;/*四个三分之一椭圆*/2.平行四边形变换：skewX(-45deg)；3．Rhombusimage/**hack解决方案，无兼容性问题**/.picture{width:400px;变换：旋转（45度）；溢出：隐藏；}.picture>img{最大宽度：100%；transform:rotate(-45deg)scale(1.42);}/**clip-path，大部分浏览器不兼容**/clip-path:多边形(50%0,100%50%,50%100%,050%);4.切角a。单角背景：linear-gradient(-45deg,transparent15px,#58a0);b.四角背景：#58a；背景：线性渐变（135deg，透明15px，#58a0）左上，线性渐变（-135deg，透明15px，#58a0）右上，线性渐变（-45deg，透明15px，#58a0）底部右，线性渐变（45deg，透明15px，#58a0）左下角；背景大小：50%50%；背景重复：不重复；c．弧形切角背景：#58a；背景：径向渐变（圆圈在左上角，透明15px，#58a0）左上角，径向渐变（圆圈在右上角，透明15px，#58a0）右上角，径向渐变（圆圈在右下角，透明15px,#58a0)右下角，径向渐变（圆圈在左下角，透明15px,#58a0)左下角；背景大小：50%50%；背景重复：不重复；d．内联SVG与border-image方法border:15px固体透明；border-image:1url('data:image/svg+xml,\
