CSS3如何实现内凹圆角效果
这篇文章主要介绍了CSS3如何实现内凹圆角效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联,为您提供网站建设、网站制作、网站营销推广、网站开发设计,对服务成都建筑动画等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈,认真对待每位客户,为客户提供赏心悦目的作品。 与客户共同发展进步,是我们永远的责任!
这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。
1. 基本线性渐变
div { height:100px; width:200px; background-image:linear-gradient(90deg,red,blue); }从左到右的红到蓝渐变
2. 加百分比调整渐变范围
div { height:100px; width:200px; background-image:linear-gradient(90deg,red 20%,blue 80%); }
3. 浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块
div { height:100px; width:200px; background-image:linear-gradient(90deg,red 50%,blue 50%); }
4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。
div { height:100px; width:200px; background-image:linear-gradient(90deg,transparent 50%,blue 50%); }
5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。
/* 径向渐变主体 */ .raidal { height:100px; width:100px; background:radial-gradient(transparent 50%,blue 50%); }
6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。
应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果
/* 径向渐变主体 */ .raidal1 { height:100px; width:100px; background:radial-gradient(200px at left top,transparent 50%,blue 50%); }
7. 同理四个方向, 调整圆心位置即可
/* 左上 */ .raidal1 { height:100px; width:100px; background:radial-gradient(200px at left top,transparent 50%,blue 50%); } /* 右上 */ .raidal2 { height:100px; width:100px; background:radial-gradient(200px at right top,transparent 50%,blue 50%); } /* 右下 */ .raidal3 { height:100px; width:100px; background:radial-gradient(200px at right bottom,transparent 50%,blue 50%); } /* 左下 */ .raidal4 { height:100px; width:100px; background:radial-gradient(200px at left bottom,transparent 50%,blue 50%); }
8. 同样,不想这么圆角,也是可以椭圆的,半径设两个参数, 就是椭圆。
/* 左上 */ .ellipse { height:100px; width:100px; background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%); }
径向渐变有很多参数大家可以自己再尝试调整,可以出现各种奇怪的形状,这里就不演示了。相对来说,内凹圆角就够用了
感谢你能够认真阅读完这篇文章,希望小编分享的“CSS3如何实现内凹圆角效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
新闻名称:CSS3如何实现内凹圆角效果
网站网址:http://pwwzsj.com/article/jehcgp.html