css揭秘|第三章：形状

date

Apr 8, 2021

slug

css-secrets-ch3

status

Published

自适应的椭圆

以下是个普通圆形

这里尺寸是被固定好的，一旦内容发生变化，比如宽度突然增加了100px，会出现像以下情况

但是我们需要的是，如果宽高不等，这个图像自己变幻成椭圆

border-radius可以单独指定水平和垂直半径，用一个/分隔

元素尺寸随着他的内容变化而变化，就不能写死长度，因此border-radius可以接受百分比值

由于这俩是一样的，我们简化为以下。这一行代码可以得到一个自适应的椭圆！

半椭圆

第一种方法：用border-top-left-radius、border-bottom-right……

不过有简写，border-radius可以一次向他提供用空格分隔的多个值，顺序和css常规顺序一样。可以为所有四个角提供完全不同的水平和垂直半径。在斜杠前指定1-4个值。

沿着y轴劈开的椭圆

四分之一椭圆

以上三个的灵魂就是给四个角指定不同的水平和垂直半径

平行四边形

内容也跟着倾斜了，解决方法：

两个元素，内容再倾斜回来

伪元素方案

边框外圆角

菱形

点一下还能恢复正方形。

主要是 clip-path这个属性很有意思

他的值

切角效果

叠加方法

右下角切角

四个角被切掉

弧形切角

内联svg与border-image的解决方案

svg待学习

裁切路径方案

优点：设置背景方便，可以给图片切角，但是不是DRY的，而且会裁切掉文本

梯形标签页

transform-origin CSS属性让你更改一个元素变形的原点

添加了一些样式

简单的饼图

基于transform的解决方案

动画效果