1，透明边框
默认状态下，背景会延伸到边框区域的下层。这样就在半透明的黑色边框中透出了这个容器自己的纯白色背景。
谢天谢地，从w3c的背景与边框第三版开始，我们可以通过 background-clip 属性来调整上述默认行为导致的不便。
background-clip : border-box (默认) --- 背景会被元素的border box(边框的外沿框)裁切掉。
padding-box --- 用内边距的外沿来把背景裁切掉
代码：
<style>
.box{
height:100px;
width:100px;
border: 10px solid rgba(0,0,0,.5);
background-clip: padding-box; /*完美*/
}
</style>
<body>
<div class="box">
</div>
</body>
2， 多重边框
box-shadow方案 :
一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的"投影"其实就像一道实线边框
且它支持逗号分隔语法，我们可以创建任意数量的投影。
outline方案：
优点： 它的边框样式十分灵活，不像上面的box-shadow方案只能模拟实线边框
缺点： 它不能接收逗号分隔的多个值;它暂时不能贴合border-radius属性产生的圆角
代码：
<style>
.box{
height:100px;
width:100px;
background-color: green;
box-shadow:inset 0 0 0 5px blue, inset 0 0 0 10px red;
/*外阴影不会相应鼠标事件，比如悬停或点击。所以设置为内阴影*/
outline: 2px dashed orange;
outline-offset: 3px; /*控制它跟元素边缘之间的间距*/
border-radius: 10px;
}
</style>
<body>
<div class="box">
</div>
</body>
3, 灵活的背景定位
很多时候，我们想针对容器的某个角对背景图片做偏移定位，如右下角。
background-position 的拓展语法方案 ：
w3c 在 CSS背景与边框第三版 中，background-position属性以及得到扩展，它允许我们指定背景图片距离任意角的偏移量。
只要我们在偏移量前面指定关键字。
<style>
.box{
height:100px;
width:100px;
background: url("img/demo.png") no-repeat bottom right #58a; /*在不支持background-position的拓展语法中，提供回退方案*/
background-position: right 20px bottom 10px;
}
</style>
<body>
<div class="box">
</div>
</body>
background-origin 方案 ：
每个元素身上都存在三个矩形框：
border box --- 边框的外沿框
padding box --- 内边距的外沿框
content box --- 内容区的外沿框
background-position 这个属性默认指定的是 padding box的左上角，这样边框才不会遮住背景图片。
不过在 w3c 背景与边框第三版 中，我们得到一个新的属性 ，把它的值改成content-box ，我们在 background-position 属性使用的边角关键字将会以
内容区的边缘作为基准（也就是说，此时背景图片距离变量的偏移量就跟内边距保持一致了）
代码 :
<style>
.box{
height:100px;
width:100px;
padding:10px;
background: url("img/demo.png") no-repeat #58a bottom right; /*或 100% 100%*/
background-origin: content-box;
}
</style>
<body>
<div class="box">
</div>
</body>
4, 边框内圆角
代码：
<style>
.box{
height:100px;
width:100px;
background-color: tan;
border-radius: 0.8em;
box-shadow: 0 0 0 0.6rem #655;
outline: 0.6em solid #655;
}
</style>
<body>
<div class="box">
</div>
</body>
得到这个视觉效果受益于两个事实：
描边并不会跟着元素的圆角走
但box-shadow是会的
这个方法有点hack的味道：
因为它依赖于 描边不跟着圆角走的事实 ，但我们无法保证这种行为是永远不变的。
5,条纹背景
水平条纹
代码：
<style>
.box{
height:100px;
width:100px;
background: linear-gradient(#fb3 50%,#58a 50%);
background-repeat: repeat;
background-size: 100% 20px;
}
</style>
<body>
<div class="box">
</div>
</body>
实现原理 ： 设置背景图大小（由于渐变是一种由代码生成的图像，我们能像对象其他任何背景图像那样对待它），使其平铺。并设置背景图为线性渐变。且根据线性渐变原理---
如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的线性渐变。
垂直条纹
代码：
<style>
.box{
height:100px;
width:100px;
background:linear-gradient(90deg ,#fb3 50%,#58a 50%); /*指定角度，使其颜色向右渐变*/
background-repeat: repeat;
background-size: 20px 100% /*颠倒*/
}
</style>
<body>
<div class="box">
</div>
</body>
5，平行四边形
代码：
<style>
.box{
position: relative;
display: inline-block;
padding: 10px;
}
.box::before{
content: '';
position: absolute;
top:0;
right:0;
bottom:0;
left:0; /*!!*/
z-index: -1;
background: #58a;
transform: skew(45deg);
}
</style>
<body>
<div class="box">
CLICK ME
</div>
</body>
心得： 我们希望伪元素保持所以宿主元素应用 position : relative 样式，并为伪元素设置 position : absolute,
然后把所有偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
此时： 用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容。为了修复这个问题，我们可以给
伪元素设置 : z-index : -1 样式，这样它的堆叠层次就会被推到宿主元素之后。
6,实现弹出框
代码：
<style>
.box{ /*用于遮挡背景*/
position: fixed;
top:0;
left:0;
bottom:0;
right:0;
background: rgba(0,0,0,0.5);
}
.in-box{ /*需要吸引用户注意的元素*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width:300px;
height:100px;
background-color: #fff;
z-index: 1;
}
</style>
<body>
<div class="box">
<div class="in-box">
</div>
</div>
</body>
7，垂直水平居中
在css中对元素进行水平居中是非常简单的：如果它是行内元素，就对它的父元素应用text-align:center;如果它是一个块级元素，就对它自身应用 margin: auto;
代码：
<style>
.box{ /*用于遮挡背景*/
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%); /*巧用css变形属性*/
height:100px;
width:100px;
background: gray;
}
</style>
<body>
<div class="box">
</div>
</body>
8,calc函数
calc() 函数用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
代码：
<style>
.box{
height:10px;
width:calc(100% - 300px);
background-color: red;
}
</style>
<body>
<div class="box">
</div>
</body>
注意：我们常用的linear-gradient()（线性渐变）其实也是一个函数
9，紧贴底部的页脚
引入新的长度单位：
vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%。
什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；
而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。
代码：
<style>
*{
padding: 0;
margin:0;
}
.main{
background-color: gray;
min-height: calc(100vh - 100px); /*巧用视口单位*/
}
.footer{
height:100px;
background-color: yellow;
}
</style>
<body>
<div class="main"></div>
<div class="footer"></div>
</body>
10,绘制三角形
代码：
<style>
.box{
width:0;
height:0;
border:50px solid transparent;
border-left: 50px solid red;
}
</style>
<body>
<div class="box"></div>
</body>
