其他
GitHub 热榜:歪果小姐姐教你用纯代码画画,真细腻!
晓查 郭一璞 发自 凹非寺
量子位 报道 | 公众号 QbitAI
绘制过程
width: 500px;
height: 350px;
background: #000;
position: relative;
&::after, &::before{
width: 20%;
height: 100%;
position: absolute;
top: 0;
z-index:2;
content: "";
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
&::after{
border-radius: 100% 0% 0% 100%;
right: 0;
}
&::before{
border-radius: 0 100% 100% 0;
left: 0;
}
}
body{
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);
radial-gradient(circle at 70% 30%, purple, transparent 40%);
△从左至右分别是缺少边界半径、阴影、变形、梯度、层叠的效果(点击查看大图)
只适用于Chrome
反向绘图
传送门:
https://github.com/cyanharlow
https://diana-adrianne.com/
https://css-tricks.com/solving-lifes-problems-with-css/
https://github.com/geonnave/primg
来和上万名读者一起见证彼此成长!
扫描下方二维码,添加杰哥微信,备注:地区/城市-职业方向/学校-昵称
,即可加入杰哥的IT之旅读者群
,群内仅供学习交流、日常互动、资源分享、经验分享等,一定要记得备注,我会尽快通过好友验证的。 👆长按识别,添加微信
本公众号全部博文已整理成一个目录,请在公众号后台回复「m
」获取! 推荐阅读:(点击如下标题即可跳转)
1、搞AI,这几本书必读!
2、Python 从入门到精通:一个月就够了!
3、【建议收藏】91 道 MySQL 面试题
4、运维,请收好网络工具中的瑞士军刀,从此故障诊断不用愁!
5、恕我直言,有了这款 IDEA 插件,你可能只需要写 30% 的代码。。。
6、Nginx系列教程(二)| 一文带你读懂Nginx的正向与反向代理 好文和朋友一起看~
来和上万名读者一起见证彼此成长!
备注:地区/城市-职业方向/学校-昵称
,即可加入杰哥的IT之旅读者群
,群内仅供学习交流、日常互动、资源分享、经验分享等,一定要记得备注,我会尽快通过好友验证的。m
」获取!推荐阅读:(点击如下标题即可跳转)
2、Python 从入门到精通:一个月就够了!
3、【建议收藏】91 道 MySQL 面试题
4、运维,请收好网络工具中的瑞士军刀,从此故障诊断不用愁!
5、恕我直言,有了这款 IDEA 插件,你可能只需要写 30% 的代码。。。
6、Nginx系列教程(二)| 一文带你读懂Nginx的正向与反向代理