怎样使用CSS实现一只鸭子头

这篇文章将为大家详细讲解有关怎样使用CSS实现一只鸭子头，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
　　代码解读
　　定义dom，容器中包含4个元素：
　　 　　
　　
　　
　　
　　
　　居中显示：
　　body{
　　margin:0;
　　height:100vh;
　　display:flex;
　　align-items:center;
　　justify-content:center;
　　background-color:papayawhip;
　　}
　　定义容器尺寸：
　　.duck{
　　width:10em;
　　height:10em;
　　}
　　用grid把4个方块按2*2布局：
　　.duck{
　　display:grid;
　　grid-template-columns:repeat(2,1fr);
　　}
　　.duckspan{
　　background-color:seagreen;
　　}
　　把容器旋转45度：
　　.duck{
　　transform:rotate(-45deg);
　　}
　　设置每个正方形的圆角，组合成一只鸭子的抽象形状：
　　.duckspan:nth-child(1){
　　border-top-left-radius:100%;
　　}
　　.duckspan:nth-child(2){
　　border-top-免费云主机、域名right-radius:100%;
　　}
　　.duckspan:nth-child(3){
　　border-bottom-right-radius:100%;
　　}
　　.duckspan:nth-child(4){
　　border-bottom-left-radius:100%;
　　}
　　为最后一个方块设置有差异的颜色，使它看起来像鸭子嘴：
　　.duckspan:nth-child(4){
　　background-color:coral;
　　}
　　在第2个方块用径向渐变画出一个圆点，代表鸭子的眼睛：
　　.duckspan:nth-child(2){
　　background-image:radial-gradient(black0.5em,transparent0.5em);
　　}
　　大功告成！

关于“怎样使用CSS实现一只鸭子头”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: jquery如何删除多个元素中的class属性

这篇文章主要讲解了“jquery如何删除多个元素中的class属性”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“jquery如何删除多个元素中的class属性”吧！ 删除方法：1、利用class类选择器获取多个…