juejin.cn
又到
获得徽章 6
- 【沸点年终总结｜超掘时光机】
🎆2022迎来尾声，你有什么话想对过去一年的自己说？一起来参加沸点「超掘时光机」年终总结活动，活动升级，玩法升级，更好玩，更刺激！
⏰活动时间：2022年12月19日-12月26日
📖活动规则：
1. 点击进入活动页面，按照要求完成任务即可参与抽奖。每个任务每天开放1次，每完成1个任务可获得1积分，每1个积分可抽奖1次。
2. 在沸点 #2022超掘瞬间# 话题下，参考给出的9个问题发布沸点，活动结束后，将由掘金运营团队评选出#2022超掘瞬间#话题下优质沸点25条，赠送掘金鼠标垫1个
🚪活动页面：
juejin.cn
补充说明：
1. 需要登陆掘金账号后，先进入活动页，再完成任务才有效
2. 矿石奖励将会实时发放，周边奖励将会在活动结束后的7个工作日后统一发放！展开2471.9k - 抽奖来啦！！！
![[礼物]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_124.83c188d.png)
奖品掘金鼠标垫大号一个![[庆祝]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_123.da47506.png)
，开奖时间：7月28号下午5点，参与方式，在本条沸点下任意评论、点赞。开奖后我会联系中奖的小伙伴，如果感觉年中总结写得还行，记得给我点赞加评论一波![[奸笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)
。 721440 - 抽奖了！抽奖了！抽奖了！
一共抽 2 位！奖品依次为：【喜马拉雅VIP月卡*1、哔哩哔哩大会员月卡*1】
🌈参与方式：在本条沸点下【评论 + 点赞】![[比心]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_113.582f64b.png)
抽奖算法来自掘金安东尼：juejin.cn
⏰开奖时间：下周疯狂星期四（7月28）晚上 8 点整![[玫瑰]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_103.6c2eed8.png)
另外，要是能支持一下这个小项目就更好了：
文档：juejin.cn
GitHub：github.com
Gitee：gitee.com 展开162106 - 关于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 展开评论1
![[礼物]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_124.83c188d.png)
奖品掘金鼠标垫大号一个![[庆祝]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_123.da47506.png)
，开奖时间：7月28号下午5点，参与方式，在本条沸点下任意评论、点赞。开奖后我会联系中奖的小伙伴，如果感觉年中总结写得还行，记得给我点赞加评论一波![[奸笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_17.bcebf79.png)
。![[比心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_113.582f64b.png)
抽奖算法来自掘金安东尼：![[玫瑰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_103.6c2eed8.png)
另外，要是能支持一下这个小项目就更好了：![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)