AdaptiveEllipseborder-radius:50%/50%;//斜线前为水平半径，斜线后为垂直半径。背景：#fb3；边界半径：100%00100%/50%；宽度：200px；高度：100px；背景：#fb3；边界半径：100%000；平行四边形方法一#testdiv{width:100px;高度：30px；行高：30px；保证金：0自动；顶部边距：50px；背景：#fb5；变换：skewX（-45deg）；}#testdiv>div{转换：skewX(45deg);文本对齐：居中；}方法二（使用伪元素）#testdiv{width:100px;高度：30px；行高：30px；保证金：0自动；顶部边距：50px；文本对齐：居中；position:relative;//给宿主元素应用position:relative样式}#testdiv::before{/*为伪元素设置position:absolute，然后将所有的offsets设置为0，这样就水平垂直了拉伸到宿主元素的大小*/position:absolute;顶部：0；右：0；左：0；底部：0；z-指数：-1；背景：#fb5；变换：skewX（-45deg）；content:'';}*：常见伪元素——::first-letter,::first-line,::before,::after,::selection。::before和::after下的唯一内容，用于在css渲染中向元素的逻辑头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档的内容，无法复制，只添加在CSS渲染层。所以不要用:before或:after来显示有意义的内容，尽量用它们来显示装饰性的内容，比如图标。例子：如果你想在网站上的一些联系电话前添加一个图标，你可以使用:before伪元素。::before和::after必须和content属性一起使用，content属性用来定义插入的内容，并且内容必须有值，至少为空。Rhombusimg{clip-path:polygon(50%0,100%50%,50%100%,050%);//创建多边形函数，参数为每个点的坐标transition:1sclip-path;}img:hover{clip-path:polygon(00,100%0,100%100%,0100%);//叠加时变方块}切角效果背景：#fb3;背景：线性渐变（-135deg，透明15px，#fb30）右上，线性渐变（135deg，透明15px，#fb30）左上，线性渐变（-45deg，透明15px，#fb30）底部右，线性渐变（45deg，透明15px，#fb30）左下角；背景大小：50%50%；背景重复：不重复；背景：#fb3；背景：径向渐变（圆圈在右上角，透明15px，#fb30）右上角，径向渐变（圆圈在左上角，透明15px，#fb30）左上角，径向渐变（圆圈在右下角，透明15px,#fb30)右下角，径向渐变（圆圈在左下角，透明15px,#fb30)左下角；背景-s大小：50%50%；背景重复：不重复；梯形标签#testdiv{position:relative;显示：内联块；填充：.3em1em0;}#testdiv::before{内容：'';位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#ccc；背景图像：线性渐变（hsla（0,0%，100%，.6），hsla（0,0%，100%，0））；border:1pxsolidrgba(0,0,0,.4);底部边框：无；边界半径：.5em.5em00；框阴影：0.15em白色插图；变换：透视（.5em）旋转X（5deg）；transform-origin:bottom;//当它在3D空间旋转时，可以固定它的底边}Simple基于transform的饼图（动画版）@keyframesspin{to{transform:rotate(.5turn);}}@keyframesbg{50%{背景：#655；}}#testdiv{边距：50px；宽度：100px；高度：100px；边界半径：50%；背景：黄绿色；background-image:linear-gradient(toright,transparent50%,#6550);}#testdiv::before{内容：'';显示：蓝CK;左边距：50%；高度：100%；背景色：继承；变换原点：左；边界半径：0100%100%0/50%；animation:spin3slinearinfinite,bg6sstep-endinfinite;}*：用到CSS3的动画属性许多比较例不同的静态饼图@keyframesspin{to{transform:rotate(.5turn);}}@keyframesbg{50%{背景：#655；}}#testdiv{边距：50px；宽度：100px；高度：100px；边界半径：50%；背景：黄绿色；background-image:linear-gradient(toright,transparent50%,#6550);}#testdiv::before{内容：'';显示：块；左边距：50%；高度：100%；背景色：继承；变换原点：左；边界半径：0100%100%0/50%；动画：旋转50s线性无限，bg100s步进无限；动画播放状态：暂停；动画延迟：继承；
