3.1 自适应的椭圆
主要的知识点
- 通过
/来分别设置横边和竖边的折叠半径 - 通过类似marging一样的简写方式来分别书写每条边上的折叠半径
- 居然忘记了百分数是相对于元素本身的高和宽
示例效果
相关代码
3.2 平行四边形
3.4 切角效果
3.4.1 菱形切角
示例效果
知识点
- 这种45度角的还好,如果换成其他角度的话,根据梯度线算偏移的角度就有点恼火了
- 利用渐变起始值和结束值不写,默认取最近色标的值这个特性,可以让代码更加简洁
- 换成径向渐变就可以搞成圆角形状的了
3.4.2 svg+border-image方案
相关代码
知识点
- 首先要了解SVG,这个...没研究过并且短时间也不会去研究
- border-image-width为1这个属性的作用,是让边框图片和边框宽度一样宽
- 再就是border-image的简写属性顺序要注意,fill必须放在url前面
