CSS 揭秘（Lea Verou)

字体大小易维护性控制

对于两个比较容易维护全局CSS字体大小的单位em,rem

    <style type="text/css">        html,body{            font-size: 30px;        }        div{            font-size: 0.8rem;        }        .first>li{            font-size: 0.8rem;            list-style: none;        }        .first>li>ul>li{            font-size: 0.8rem;            list-style: none;        }        button{            padding:0.3rem 0.2rem;            line-height: 0.6rem;            font-size: 0.6rem;            background: #58a;            outline: none;            border:none;            border-radius: 0.2rem;        }    </style>

rem单位相对于根元素的字体大小，即HTML，而em相当于与父元素字体的大小；上面若将单位rem改成em则可以看到一个字体变小的层级效果。

利于响应式设计的注意点

1. 使用百分比来代替固定的长度；
2. 使用max-width来代替width；
3. 为替换元素img，video，iframe等设置max-width的值为100%；
4. 假如背景图要覆盖整个背景，使用background-size：cover都能做到；
5. 当图片以行列来布局时，让视口的宽度来决定行数；
6. 使用多列文本时，指定column-width而不是column-count；

对于CSS简写的认识

1. background与background-color；

   background指定的背景色会清空背景相关的属性，而background-color不会，他可能会受background-image的干扰。

CSS中的样式计算

1. 100%-50px：calc(100% - 10px)

   calc：可以进行加减乘除，百分比，单位混合的计算，在使用的时候注意加减乘除前后要保留一个空格，否则会无效；

背景与边框

1. background-clip：半透明边框

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

   背景颜色会默认覆盖范围是border-box的范围，通过指定background-clip的裁剪范围为padding-box可以使得背景色的返回变成padding-box的范围。
   background-clip的取值：border-box，padding-box，content-box

2. box-shadow：模拟多重边框

   box-shadow:h v blur spread color inset

   .bgshadow{    background: yellowgreen;    box-shadow: 0 0 0 10px #655,                0 0 0 15px deeppink,                0 2px 5px 15px hsla(0,0%,100%,0.5);}

3. outline：实现虚线边框

   outline在border之外，如下能实现上面border-shadow实现的多重边框效果，只是缺少最后的模糊。

   .bgoutline{    background: yellowgreen;    border:10px solid #655;    outline:5px solid deeppink;}

   虽然如此但box-shodow无法控制边框的样式，而outline可以设置虚线等边框样式。
   还有就是outline不会因为border-radius变成圆角，而box-shodow会。

4. background-position和background-origin背景图片的偏移以及calc函数计算对图片的偏移

   .bgimagepo{    padding: 10px;    background: url(user_portrait.jpg) no-repeat #58a;    background-position: right 10px bottom 10px;}.bgimagepo{    padding: 10px;    background: url(user_portrait.jpg) no-repeat #58a right bottom;    background-origin: content-box;}.bgimagepo{    padding: 10px;    background: url(user_portrait.jpg) no-repeat #58a;    background-position: calc(100% - 10px) calc(100% - 10px);}

   三种实现的效果一样，但是第二种在要求图片也是padding的距离边框时，第二种比较好维护。
   这里background-position的默认覆盖面积是padding-box；

   background-position的取值比较多样：

   eg：top left 左上，顺序无影响；还可以top 10px left 20px表示左偏移20px，上偏移10px；还可以使用百分数定位，可以使用具体的单位定位，省略的一个方向表示中间center或50%；（参见W3c）

   background-origin的取值：border-box，padding-box，content-box；

   calc：可以进行加减乘除，百分比，单位混合的计算，在使用的时候注意加减乘除前后要保留一个空格，否则会无效；

5. 利用一个div实现矩形内部圆角矩阵

   .bgdivradius{    background: #58a;    box-shadow: 0 0 0 5px yellowgreen;    border-radius: 10px;    outline: 10px solid yellowgreen;}

   利用outline不会随着圆角的特性，用box-shadow覆盖因为boder圆角造成的颜色不一致。

6. linear-gradient制造纹理背景图

linear-gradient使用

.bgwein1{    background: linear-gradient(#fb3 50%,#58a 50%);    background-size: 100% 60px;}.bgwein2{    background: linear-gradient(#fb3 30%,#58a 0);    background-size: 100% 60px;}.bgwein3{    background: linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);    background-size: 100% 60px;}.bgwein4{    background: linear-gradient(to right,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);    background-size: 60px 100%;}.bgwein5{    background: linear-gradient(45deg,#fb3 50%,#58a 0);    background-size: 42px 42px;}.bgwein6{    background: linear-gradient(45deg,#fb3 33.3%,#58a 0,#58a 66.6%,yellowgreen 0);    background-size: 42px 42px;}.bgwein7{    background: linear-gradient(45deg,#fb3 25%,#58a 25%,#58a 50%,#fb3 50%,#fb3 75%,#58a 0);    background-size: 42px 42px;}// .bgwein7{//  background: repeating-linear-gradient(45deg,#fb3,#fb3 15px,#58a 0,#58a 30px);// }.bgwein8{    background: repeating-linear-gradient(45deg,#fb3,#58a 30px);}.bgwein9{    background: repeating-linear-gradient(30deg,yellowgreen,yellowgreen 15px,#58a 0,#58a 30px);}.bgwein10{    background: yellowgreen;    background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px);}

注意对于：

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

两个表示的是等价的；

(The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively)顺时针旋转
8. 制造复杂的纹理背景图（网格和波点）

1. 随机的条纹背景

.bgwein18{    background: hsl(20,40%,90%);    background-image: linear-gradient(90deg,#fb3 11px,transparent 0),                      linear-gradient(90deg,#ab4 23%,transparent 0),                      linear-gradient(90deg,#655 25%,transparent 0);    background-size: 41px 100%,61px 100%,83px 100%;}

思路是：一种颜色作为底色，另外几种颜色作为条纹，然后让条纹衣不同的间隔进行重复平铺。如果每个条纹平铺的间隔选质数，则他们会重复的最小距离是这里个数相乘的结果，即最大公倍数。上面的例子即为207583的距离。

1. border-image设计边框蚂蚁行军效果

形状

1. 自适应椭圆border-radius：w/h以及百分比的展开和简写；

   border-radius:wtl wtr wbr wbl/htl htr hbr hbl;
   其中w表示水平半径，h表示垂直半径，t表示top一次类推；
   上面展开表示：

   border-top-left-radius：wtl htl;

   border-top-right-radius：wtr htr;

   border-bottom-right-radius：wbr hbr;

   border-bottom-left-radius：wbl hbl;

2. 画一个四分之一椭圆；

   .bgradius3{    width: 200px;    height: 150px;    background:#fb3;    border-radius: 100% 0 0 0/100% 0 0 0;}

   利用了x轴的百分比相对于width,y轴的百分比相对于height;

3. 平行四边形skew（）；

   .bgskew{    background:#ab4;    transform:skew(20deg);}

4. 图片菱形展示以及裁剪clip-path；

   .bgskewroate{    background:#ab4;    transform:rotate(45deg);    overflow: hidden;}.bgskewroate img{    //不能作用于span等inline元素;    transform:rotate(-45deg) scale(2.2);    max-width: 100%;    height: auto;}

   旋转+图片的缩放，由于图片的100%是相对于div的width而不是div的对角线长，需要对图片进行放大以填充几个角，

5. 利用渐变实现切角效果以及利用clip-path实现切角；

   .bgdelradius{    background: yellow;    background-image: linear-gradient(45deg,#000 10%,transparent 0,transparent 90%,#000 0),                        linear-gradient(-45deg,#000 10%,transparent 0,transparent 90%,#000 0);}

   对切取的角设置为最外面的背景色。

6. 利用渐变实现内凹角效果；

   .bgsinerradius1{    background: radial-gradient(circle at top left,transparent 30px,#fb3 0) top left,                        radial-gradient(circle at top right,transparent 30px,#fb3 0) top right,                        radial-gradient(circle at bottom right,transparent 30px,#fb3 0) bottom right,                        radial-gradient(circle at bottom left,transparent 30px,#fb3 0) bottom left;    background-size: 50% 50%;    background-repeat: no-repeat;}

   使用径向渐变，在各个角设置为透明，此处background-size设置成50%保证刚好拼接四个角所在的图片的同时不会使一个角的设置影响另一个角。

7. border-image+svg实现斜面切角的效果

8. 梯形；

   .bgtrapezoid{    height: 100px;    background: yellowgreen;    transform:perspective(0.5em) rotateX(-2deg);}

利用投影，加上对其以X为轴旋转，可以看到一个梯形；

1. 饼图+动画效果；

   .bgpie{    background: #fb3;    border-radius: 50%;    background-image: linear-gradient(to right, transparent 50%,#655 0);}.bgpie::before{    content: '';    display: block;    margin-left: 50%;    height: 100%;    border-radius: 0 100% 100% 0/50%;    background:#655;    background-color: inherit;    transform-origin:left;    animation:spin 3s linear infinite,                bg 6s step-end infinite;}@keyframes spin{    to{transform:rotate(.5turn)}}@keyframes bg{    50%{background: #655}}

   一个基本的圆，然后一个遮罩覆盖在圆上，旋转遮罩，改变被遮挡部分的颜色；

视觉效果

1. 单侧投影以及对边投影；

.bgshadowsingle{    background: green;    box-shadow: 0 6px 6px -3px yellow,                0 -6px 6px -3px yellow,                12px 0 6px -3px #fff,                -12px 0 6px -3px #fff;}

对于box-shadow再次说明每个值得含义：

box-shadow：x y blur radiusadd color;

其中x,y分别表示相当对于x,y轴的偏移量，blur表示模糊距离，一般模糊后实际长宽会增加模糊距离的两倍，扩张半径会使每条边向外扩张或者收缩；

上面采用了因为模糊距离增加其他边的长度，然后利用扩张半径使不相关的还原，实现单边模糊的效果。

1. 不规则投影，比如运用了border-radius；

2. 染色（滤镜）；
   滤镜效果很棒，根据不同的组合会得到你意想不到的结果

   1. blur，模糊作用；
   2. brightness，调节光亮；
   3. contrast，调节对比度；
   4. grayscale，灰度；
   5. invert，色调取反；
   6. saturate，饱和度；
   7. sepia，棕色；
   8. opacity，透明度；
   9. hue-rotate，根据颜色轮选取色调；
   10. drop-shadow，类似box-shadow；

   .bgdye1 img{    max-width: 100%;    height: auto;    -webkit-filter:sepia(1) saturate(4) hue-rotate(200deg);    filter:sepia(1) saturate(4) hue-rotate(295deg);}.bgdye2 img{    max-width: 100%;    height: auto;    -webkit-filter:blur(2px);    filter:blur(2px);}.bgdye3 img{    max-width: 100%;    height: auto;    -webkit-filter:brightness(0.2);    filter:brightness(0.2);}.bgdye4 img{    max-width: 100%;    height: auto;    -webkit-filter:contrast(0.5);    filter:contrast(0.5);}.bgdye5 img{    max-width: 100%;    height: auto;    -webkit-filter:grayscale(1);    filter:grayscale(1);}.bgdye6 img{    max-width: 100%;    height: auto;    -webkit-filter:invert(0.8);    filter:invert(0.8);}

3. 毛玻璃效果；

我没看出什么变化来，如果给伪元素设置一个易看的背景色，则会发现其中的变化。（还要好好研究）

.bgfrostedglass{    width: 600px;    height: 400px;    background: url(2.jpg) no-repeat;    background-size: cover;    text-align: center;}.bgfrostedglass main{    position: relative;    vertical-align: center;    display: inline-block;    width: 400px;    margin-top: 20%;    padding: 5%;    background: hsla(0,0%,100%,0.3);    overflow: hidden;    line-height: 24px;}.bgfrostedglass>main::before{    content: "";    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    -webkit-filter:blur(20px);    filter:blur(20px);    margin: -30px;}

1. 折角效果；

   1. 充分利用linear-gradient实现切角并充分掌握background-size，background-position。
   2. 充分利用linear-gradient实现切角，用伪元素生成非特殊三角形；

   .bgfold1{    // background: #58a;    background-image: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0),                      linear-gradient(-135deg,transparent 1.4rem,#58a 0);    background-position: 100% 0,0 0;    background-size: 2rem 2rem,100% 100%;    background-repeat: no-repeat;}.bgfold2{    // background: #58a;    position: relative;    background-image:linear-gradient(-150deg,transparent 1.5rem,#58a 0);    border-radius: 0.5rem;}.bgfold2::before{    content: "";    position: absolute;    top: 0;    right: 0;    width: 1.73rem;    height: 3rem;    transform:translateY(-1.3rem) rotate(-30deg);    transform-origin:bottom right;    background: linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.2) 0,rgba(0,0,0,.4)) 100% 0 no-repeat;    border-bottom-left-radius: inherit;    box-shadow: -.2rem .2rem .3rem -.1rem rgba(0,0,0,.15);}

demo地址