关于css属性的学习 - 乐享qicheng - 沸点 - 掘金

前端开发

关于css属性的学习
1，object-fit:fill/contain/cover (作用于img标签)
fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。

2，background: linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。(如图二所示)

3，background: radial-gradient()函数用径向渐变创建 "图像",径向渐变由中心点定义,为了创建径向渐变你必须设置两个终止色。(如图三所示)

4， clip-path: polygon/circle/ellipse/inset属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
裁剪多边形polygon(x1 y1,x2 y2,x3 y3...)这里的x，y都是多边行点的坐标。所以实现六边形可以参考（宽高要调节，不能相等，如图四所示）：
（方法1，侧六边形）：clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
（方法2，正六边形）：clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

总结（图五）：纯css实现，1，正六边形用到clip-path；2，底部阴影用到伪类元素且使用 radial-gradient径向渐变；3，然后鼠标移上去的hove效果就是transition：1s；4，图片的裁剪就是object-fit了。

参考帖，
1，

blog.csdn.net
2，

mp.weixin.qq.com

展开

赞过