CSS3实现内凹圆角的实例代码

互联网   05-04 16:59:38   作者:D. Young   我要评论
本篇文章主要介绍了CSS3实现内凹圆角的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
圆角,大家一定都会做,border-radius, 内凹圆角如何实现? 可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不太好改了,这种方法就有局限性。 说白了就是遮盖的那部分不透明以后,自适应性不强。 这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。 1. 基本线性渐变
div { height:100px; width:200px; background-image:linear-gradient(90deg,red,blue); } <div>从左到右的红到蓝渐变</div>
2. 加百分比调整渐变范围
div { height:100px; width:200px; background-image:linear-gradient(90deg,red 20%,blue 80%); } <div></div>
3. 浓缩渐变范围,直至重合,形成一个红蓝分隔的两个色块
div { height:100px; width:200px; background-image:linear-gradient(90deg,red 50%,blue 50%); } <div></div>
4. 颜色是可以设置透明色的,transparent, 将红色改成透明色,可以看到只有蓝色的色块了。
div { height:100px; width:200px; background-image:linear-gradient(90deg,transparent 50%,blue 50%); } <div></div>
5. 同理联想到径向渐变,同样缩小渐变圈,直至重合,靠近圆心的颜色设成transparent。
/* 径向渐变主体 */ .raidal { height:100px; width:100px; background:radial-gradient(transparent 50%,blue 50%); } <div class='raidal'></div>
6. 径向渐变是可以设置半径圆心位置的,所以设到左顶角,left top 调整半径大小为 200px,就发现背景透明的内凹圆角实现了。 应用时可以用伪元素设置,然后用绝对定位,子绝父相,调整位置,组合成想要的效果
/* 径向渐变主体 */ .raidal1 { height:100px; width:100px; background:radial-gradient(200px at left top,transparent 50%,blue 50%); } <div class='raidal1'></div>
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%); } <div class='raidal1'></div> <div class='raidal2'></div> <div class='raidal3'></div> <div class='raidal4'></div>
8. 同样,不想这么圆角,也是可以椭圆的,半径设两个参数, 就是椭圆。
/* 左上 */ .ellipse { height:100px; width:100px; background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%); } <div class='ellipse'></div>
径向渐变有很多参数大家可以自己再尝试调整,可以出现各种奇怪的形状,这里就不演示了。相对来说,内凹圆角就够用了   以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  1. Tag:CSS3   内凹圆角  

相关文章

  1. css3图片边框border-image的用法
    在CSS3里引入的很多新特征中,这篇文章主要介绍了css3图片边框border-image的用法,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-30
  2. CSS3圆角边框和边界图片效果实例
    这篇文章主要为大家详细介绍了CSS3边框的不同效果实现代码,包括CSS3圆角边框、盒阴影、边界图片的制作方法,感兴趣的小伙伴们可以参考一下
    2016-07-01
  3. CSS3实现多重边框的方法总结
    CSS3的box-shadow用来制作多重边框真的比较给力,这也是本文CSS3实现多重边框的方法总结的重点,不过在此之前我们还是先来看一下兼容性较好的传统方式:
    2016-05-31
  4. 详解CSS3的box-shadow属性制作边框阴影效果的方法
    这篇文章主要介绍了CSS3的box-shadow属性制作边框阴影效果的方法,box-shadow属性还是十分强大的,能设定阴影的水平或垂直位置,以及阴影的颜色和尺寸等,需要的朋友可以参考下
    2016-05-10
  5. 详解CSS的border边框属性及其在CSS3中的新特性
    这篇文章主要介绍了详解CSS的border边框属性及其在CSS3中的新特性,既涵盖了基础的边框宽度与颜色设置又讲到了CSS3中的图片边框及边框渐变,需要的朋友可以参考下
    2016-05-10
  6. 6种非常炫酷的CSS3按钮边框动画特效
    这篇文章主要介绍了一款效果非常炫酷的CSS3按钮边框动画特效,按钮的边框会以不同的方式进行各种动画,感兴趣的小伙伴们可以参考一下
    2016-03-16
  7. 深入浅析css3 border-image边框图像详解
    css3中新增了一个属性 border-image ,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边
    2015-11-24
  8. Css3圆角边框制作代码
    本篇文章给大家介绍基于css3来实现边框圆角效果,实现此效果当然border-radius要在firefox或Safari 和 Chrome才能实现哦。对css3圆角边框制作代码感兴趣的朋友参考下吧
    2015-11-18
  9. css3圆角边框和边框阴影示例
    这篇文章主要介绍了css3圆角边框和边框阴影示例,需要的朋友可以参考下
    2014-05-05
  10. CSS3之边框多颜色Border-color属性使用示例
    Border-color是专为边框的多颜色而准备的属性,接下来为大家介绍一下CSS3之边框多颜色Border-color的使用,喜欢的朋友不要错过
    2013-10-11

最新评论

利发国际手机客户端