大佬教程收集整理的这篇文章主要介绍了jquery – 从div切出的CSS椭圆形状，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
>菜单栏是一个带有轻微线性渐变的div(深灰色到透明浅灰色)
>公司徽标图像有一个透明的bg,位于菜单栏的“ontop”上
>椭圆形切口需要与徽标的椭圆形相匹配,并且两者之间有透明的间隙,以显示背景颜色(每页都有变化,橙色只是一个例子)
我已经尝试过多次使用径向渐变 – 我能够得到一个圆形切出但无法弄清楚如何使其成为椭圆形,然后无法使线性渐变起作用.看代码：
.circle { height: 10em; BACkground: radial-gradient(circle 50px at 50% 100%,transparent 50px,rgba(84,82,94,0.8) 50pX); BACkground: -webkit-radial-gradient(50% 100%,circle,0.8) 50pX); }
对切口形状和渐变进行排序时,徽标将位于顶部.
编辑2：通过稍微改变设计解决了问题,感谢那些回复的人.我写了一些jquery来解决这个问题 – 当彩色区域滚出视图时,椭圆边框和标题边框会拾取顶部的颜色,而不是透明度.
注意：我添加了一个小动画来更改背景颜色,只是为了清除岛和div之间的空间与切口是真的透明.
HTML
<div class="cutout">
<div class="island">
<div id="circleText">Circle Text </div>
</div>
</div>
CSS
.cutout { height: 10em; BACkground: radial-gradient(ellipse 200px 150px at 50% 100%,transparent 100px,#555 50pX); position: relative; } .island { position: absolute; left: calc(50% - 150pX); bottom: -50%; width: 300px; BACkground: radial-gradient(ellipse 200px 150px at 50% 50%,silver 90px,rgba(0,0) 50pX); height: 10em; } .island > div { position: absolute; left: 80px; right: 80px; top: 30px; bottom: 30px; BACkground: rgba(fff,0.2); padding: 5px; text-align: center; } #circleText { padding-top: 30px; font-size: 1.5em; }
以上是大佬教程为你收集整理的jquery – 从div切出的CSS椭圆形状全部内容，希望文章能够帮你解决jquery – 从div切出的CSS椭圆形状所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。