径向渐变做缺角效果
缺角效果
效果
话不多说直接上设计稿
不仔细的前端开发者稍不注意就会忽略一些细节,尤其是两个缺角效果就不会完美的实现。
圆角实现
这个页面的主体是两个圆角的盒子组成,有些图方便或者不仔细的前端开发者可能就直接两个盒子贴合。
为了方便,我们不实现设计稿中的全部细节,只将其中最重要的部分提出来用以说明问题,html结构如下:
<div class="container"> <div class="banner">banner部分</div> <main>主体</main> </div>
接下来我们分析一下圆角实现的问题:
.container { display: inline-block; border: 2px solid #000; padding: 30px; font-size: 40px; text-align: center; } .banner { border-bottom: 1px dashed #ddd; border-radius: 5px 5px 10px 10px; box-shadow: 0px 4px 30px 0px rgba(173, 173, 173, 0.15); width: 350px; height: 150px; background-color:rgba(234, 169, 84, .1); } main { border-radius: 10px 10px 5px 5px; box-shadow: 0px 4px 30px 0px rgba(173, 173, 173, 0.15); width: 350px; min-height: 400px; background-color: #fff; }
圆角实现非常简单,但是缺陷显而易见,缺角凹陷的方向不对,对于追求细节的客户是绝对接收不了的。
遮罩缺角
相信大部分人应该会想到,用元素去做一个白底遮罩。
只用稍微修改banner部分
.banner { position: relative; border-bottom: 1px dashed #ddd; border-radius: 5px 5px 0 0; box-shadow: 0px 4px 30px 0px rgba(173, 173, 173, 0.15); width: 350px; height: 150px; background-color:rgba(234, 169, 84, .1); } .banner:before { position: absolute; left: -10px; bottom: -10px; border-radius: 50%; width: 20px; height: 20px; background-color: #fff; content: ''; } .banner:after { position: absolute; right: -10px; bottom: -10px; border-radius: 50%; width: 20px; height: 20px; background-color: #fff; content: ''; }
以下为效果图:
径向渐变
增加新元素的做法可能有些开发者并不喜欢,并且如果盒子的shadow再明显一点很容易看出两个圆形遮罩的存在,这样就需要对两个盒子使用overflow: hidden
,如果盒子需要超出做其他效果,就会引起矛盾了,即使不矛盾也共计需要四个元素或伪元素做遮罩。如果不喜欢上面那种取巧的方式,那下面这种方式就值得一试了。
开始之前先简单介绍一下径向渐变
- 标准写法:radial-gradient(center, shape size, start-color, ..., last-color)。
- CSS3属性,所以使用前和书写时都要考虑兼容性。
- 第一个参数定义位置,默认为center。
- 第二个参数定义形状和大小, 默认椭圆ellipse 最远角落farthest-corner。
- 剩余参数定义颜色列表。
一个简单的径向渐变例子
<style> div { width: 200px; height: 200px; background: radial-gradient(center, circle, farthest-corner, red, orange, yellow, blue, green); } </style> <div></div>
center表示渐变的中心在元素中心,circle表示渐变的形状为圆形,farthest-corner表示渐变的范围从中心到最远的元素角落,最后是从内到外的颜色渐变列表。以下为效果图:
现在要实现设计稿的效果要解决两个问题:
- 渐变色的取值。
- 多个渐变的叠加。
直接上代码,为了看出渐变内的阴影效果,加大了box-shadow
.banner { border-radius: 5px 5px 0 0; box-shadow: 0px 4px 30px 0px rgba(173, 173, 173, 0.3); width: 350px; height: 150px; background-color:rgba(234, 169, 84, .2); background-image: -webkit-radial-gradient( 0 100%, circle farthest-corner, #f2f2f2 10px, transparent 10px ), -webkit-radial-gradient( 100% 100%, circle farthest-corner, #f2f2f2 10px, transparent 10px ); background-image: radial-gradient( 0 100%, circle farthest-corner, #f2f2f2 10px, transparent 10px ), radial-gradient( 100% 100%, #f2f2f2 10px, transparent 10px ); } main { border-radius: 0 0 5px 5px; box-shadow: 0px 4px 30px 0px rgba(173, 173, 173, 0.3); width: 350px; min-height: 400px; background-image: -webkit-radial-gradient( 0 0, circle farthest-corner, #f2f2f2 10px, transparent 10px ), -webkit-radial-gradient( 100% 0, circle farthest-corner, #f2f2f2 10px, transparent 10px ); background-image: radial-gradient( 0 0, circle farthest-corner, #f2f2f2 10px, transparent 10px ), radial-gradient( 100% 0, #f2f2f2 10px, transparent 10px ); }
这实际会引起一个新问题,分割线需要用另一内部元素实现,否则分割线的长度不对,解决好这个问题后的效果图:
渐变实现的好处还在于,能在径向渐变时直接设置颜色列表,在缺角内模拟盒子阴影效果。颜色列表直接影响到缺角内的阴影是否协调,必须与盒子的box-shadow
融为一体,从而达到以假乱真的效果。
使用径向渐变还有一个小技巧:可以用background-size设置大小,上个例子可以认为是两个渐变叠加在一起了,只是重叠的部分被设置为了transparent
透明,如果你遇到一个需求不能设置将重叠部分设置为透明,那么可以像设置背景图一样设置背景渐变。每个background-***
中的值都可以用,
分隔,达到设置多个背景渐变不同属性的效果。
background-size: 10px 10px; background-repeat: no-repeat; background-position: 0 100%,100% 100%;
缺角效果可以用多种方式实现,带box-shadow
的缺角并不好做,用径向渐变可以模拟shadow效果,颜色列表的规划至关重要。学会了径向渐变可以做很多复杂的效果,再也不用担心设计大佬忘记切图了。
作者简介:叶茂,芦苇科技web前端开发工程师,代表作品:口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发,专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战: web@talkmoney.cn 访问 www.talkmoney.cn 了解更多
- 径向渐变做缺角效果
- android 自定义Dialog提示+动画效果(完整版)
- Android编程实现仿心跳动画效果的方法
- 多图片上传预览效果
- 安卓短信验证码倒计时效果
- font和line-height之CSS代码书写顺序不同,导致显示效果不一样
- js拖放效果
- 面试碰到的一个粒子效果问题
- jQuery实现DIV边框效果(插件jquery.corner.js)
- 关闭UITableView cell的被选中效果
- ANDROID PAGERADAPTER的使用方法_安卓实现左右滑动指引效果
- Android实现腾讯新闻的新闻类别导航效果
- 微信小程序animation循环动画效果--让云朵飘
- html5--6-56 阶段练习5-翻转效果
- iphone&ipad图标去除高亮的光圈效果
- Android界面无标题栏和全屏效果的实现方式
- [blog 算法原理]如何做出半透明和闪光效果
- Android线性布局权重Weight效果展示
- 设置tabbar有被选中的效果,添加背景
- UITableView 隐藏多余的分割线和实现分割线左边顶格的效果