《css揭秘》学习笔记（二）

第三章形状
9、自适应的椭圆
圆形：给一个正方形设置一个大于边长长度一半的border-radius即可。
椭圆：

border-radius:50%;

半椭圆：

border-radius:100% 0 0 0;

四分之一椭圆：

border-radius:100% 0 0 0;

10、平行四边形
最简单的变形：形状和内容一起变形，不合要求（要求是形状变形，文字不变形）

transform:skewX(-45deg);

嵌套元素方案：使用一个嵌套的div，即两个div，在包含文字的div对其再变形一次，从而抵消容器的变形。
伪元素方案：把所有的样式应用到伪元素上，然后再对伪元素进行变形。

.button{    position: relative;    /*其他的文字颜色，内边距等样式*/}.button::before{/*在IE8中及较早版本中必须声明<!DOCTYPE>*/    content:'';    position:relative;    top:0; right: 0; bottom:0; left:0;    z-index: -1;    background:#58a;    transform:skew(45deg);}

11、菱形图片
方法一：把图片用一个div包裹，然后对其应用相反的rotate()变形样式：

<div class="picture"><img src="xxx.jpg" alt="..." /></div>

.picture{width:400px;transform:rotate(45deg);overflow:hidden;}.picture >img{max-width:100%;transform:rotate(-45deg) scale(1.42);/*图片的边长和容器对角线相等，scale默认是以它的中心点进行缩放，除非额外指定transform-origin样式*/}

方法二：clip-path属性，从svg处借鉴

clip-path:polygon(50% 0， 100% 50%， 50% 100%， 0 50%);/*多边形函数，clip-path允许把元素剪裁成我们想要的任何形状*/

延伸：可以参与动画，只要我们的动画是在同一种形状函数之间进行的，而且点的数量是相同的。此外这个方法还可以很好地适应正方形的图片。

如果希望图片在鼠标悬停时平滑的扩展为完整的面积：

img{clip-path: poly(50% 0， 100% 50%， 50% 100%， 0 50%);transition:1s clip-path;}img:hover{clip-path: poly(0 0， 100%0，100% 100%， 0100%);}

12、切角效果

方案一：css渐变：只需要一个角被切掉，渐变可以接受一个角度（例如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。

线性渐变：把一个透明色标放在切角处，在相同位置设置另一个色标，并且把他的颜色设置为我们想要的背景色。

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

假设两个切角，需要两层渐变：

background:#58a;background:linear-gradient(-45deg, transparent 15px, #58a 0) right,                       linear-gradient(45deg, transparent 15px, #655 0) left ;background-size: 50% 100%;/*使每层渐变只占整个元素一半的面积*/background-repeat: no-repeat;

四个角

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

如果用scss写：略

弧形切角----------内凹圆角

background:#58a;background:radial-gradient(135deg, transparent 15px, #58a 0) top left;/*径向渐变*/               radial-gradient(-135deg, transparent 15px, #58a 0) top right ;               radial-gradient(-45deg, transparent 15px, #58a 0) bottom right;               radial-gradient(45deg, transparent 15px, #58a 0)bottom left ;background-size: 50% 50%;background-repeat: no-repeat;

内联svg与border-image方案

border: 15px solid transparent;border-image: 1 url('data: image/svg+xml,\        /*1表示svg的坐标系统*/<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);

 最大的缺点在于：当内边距不够宽时，它会裁切掉文本，渐变方案允许文字溢出并超出切角区域；而border-image方案则会起到普通边框的作用，令文字折行。

13、梯形标签页

根据透视原理，在三维图形中旋转一个矩形，看到的图形就是梯形

transform: perspective(.5em) rotate(5deg);

但这样产生的文字也变形了，对元素使用了3D变形之后，其内部的变形效应是“不可逆转的”。如果使用3D变形的功能生成梯形，唯一可行的方案是将变形效果应用在为元素上，类似于生成平行四边形的方法。

.tab{    position: relative;    display: inline-block;    padding: .5rem 1rem .35rem;    color:white;}.table:before{    content:'';/*用伪元素生成一个矩形*/    position:absolute;    top:0;right:0;bottom:0;left:0;    z-index:-1;    background:#58a;    transform:perspective().5rem rotate(5deg);}

由于以上虽然可以实现，但是元素投射到2D屏幕上的尺寸会发生很多变化：宽度增加、位置稍稍下移、高度稍许缩减等。

必须指定transform-origin:bottom;当它在3D空间中旋转时，可以把他的底边固定住。通过变形属性来改变尺寸。

transform:scaleY(1.3) perspective(.5rem) rotate(5deg);transform-origin:bottom;

标签页的例子：

nav > a{    position: relative;    display: inline-block;    padding: .3rem 1rem 0;}nav > a{    content: '';    position: absolute;    top: 0; left: 0; right: 0; bottom: 0;    z-index: -1;    background: #ccc;    background-image: linear-gradient(hsla(0, 0%,100%,.6)                                 hsla(0, 0%,100%,0));    border: 1px solid rgb(0, 0, 0, .4);    border-bottom: none;    border-radius: .5rem .5rem 0 0;    box-shadow: 0 .15rem white inset;    transform:perspective().5rem rotate(5deg);    transform-origin: bottom;}

缺点：斜边的角度依赖与元素的宽度。

14、简单的饼图

炫酷的进度指示器：

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

多个不同比率的静态饼图：

<div class="pie" style="animation-delay: -20s"></div><div class="pie" style="animation-delay: -60s"></div>

@keyframes spin{    to {transform: rotate(.5turn);}}@keyframes bg{    50% { background: #655;}}.pie::before{    content: '';    display: block;    margin-left: 50%;    height: 100%;    border-radius: 0 100% 100% 0 / 50%;    background-color: inherit;    transform-origin: left;    animation: spin 50s linear infinite,                bg 100s step-end infinite;    animation-play-state: paused;    animation-delay: inherit;}

把饼图的比率写到元素的内容中：

$$('.pie').foreach(function(pie){    var p = parseInt(pie.textContent);    pie.style.animationDelay = '-' + p + 's';});

最终代码：

.pie{    position: relative;    width: 100px;    line-height: 100px;    border-radius:50%;    background: yellowgreen;    background-image: linear-gradient(to right, transparent 50%, #655 0);    color: transparent;    text-align: center; }@keyframes spin{    to {transform: rotate(.5turn);}}@keyframes bg{    50% { background: #655;}}.pie::before{    content: '';    display: block;    margin-left: 50%;    height: 100%;    border-radius: 0 100% 100% 0 / 50%;    background-color: inherit;    transform-origin: left;    animation: spin 50s linear infinite,                bg 100s step-end infinite;    animation-play-state: paused;    animation-delay: inherit;}

svg解决方案：

<svg width="100" height="100"><circle r="30" cx="50" cy="50"/></svg>circle{    fill:yellowgreen;    stroke: #655;    stroke-width: 50;    stroke-dasharray: 60 158;/*为虚线描边准备*/}svg{    transform: rotate(-90deg);    background: yellowgreen;    border-radius: 50%;}

优化后代码：

<svg viewbox="0 0 32 32"><circle r="16" cx="16" cy="16"/></svg>circle{    fill:yellowgreen;    stroke: #655;    stroke-width: 32;    stroke-dasharray: 38 100;}svg{    width: 100;height: 100;    transform: rotate(-90deg);    background: yellowgreen;    border-radius: 50%;}

用js脚本实现css：略。