android 内凹的圆角,css实现内凹圆角样式

最新开发遇到一个弹框，弹框中间有两个内凹的半圆，而且还是透明的，不能遮挡到底层的内容。基于这个需求，找到了一个比较好的实现方法。

先上一下demo效果图：

image.png

实现这个效果主要是用了background-image 结合径向渐变radial-gradient。

示例：

background-image: radial-gradient(circle 10px at 0 100%, transparent 50px, red 50%);

而对于径向渐变，主要是3个参数控制。

一个是原点和大小。大小类似border-radius的感觉，原点使用at表示可以指定点的坐标，或使用left、right、top、bottom来表示。

其次是两个颜色和透明度、大小等。这里50px或百分比，亲测第一个只有50才是半圆角，而第二个50%貌似影响不大。

下面是代码：

margin:0;

padding:0;

}

.top-box{

width:100%;

height:200px;

background: red;

position: relative;

margin-bottom:20px;

border-radius: 4px 4px 0 0;

}

.bottom-box{

width

android 内凹的圆角,css实现内凹圆角样式相关推荐

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）
最近写到小程序,设计方面有一个设计图涉及内凹圆角问题.网上百度好多种,都是经过径向渐变实现的.虽然能实现单个角,可是当四个角合在一块儿就很麻烦了. 上设计图css 径向渐变实现:html backgr ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
html 怎么把图片变成圆角,css怎么样实现图片圆角
css实现图片圆角的方法:首先创建一个HTML示例文件:然后创建一个div元素:最后通过css3的"border-radius"属性给元素添加圆角即可. 本教程操作环境:Windo ...
CSS 行内格式化上下文中的各种高度计算
前言碎碎语:标题问题在昨天困扰了笔者很久很久,早上把问题提到了各网络也暂时没有回复.因为明天要早起飞异地参加一场校招面试,笔者还是很紧张的,但奈何问题不解决寝食难安--所以还是卯起劲重新思考这个问题, ...
Android 软键盘弹出时布局内指定内容上移实现及问题解决
Android 软键盘弹出时布局内指定内容上移实现及问题解决参考文章: (1)Android 软键盘弹出时布局内指定内容上移实现及问题解决 (2)https://www.cnblogs.com/as ...
[css] 行内css和important哪个优先级高？
[css] 行内css和important哪个优先级高? !important 将覆盖行内css css优先级:行内css>id选择器(#)>伪类(:)>属性选择器([])>类 ...
[css] 行内元素和块级元素有什么区别，如何相互转换？
[css] 行内元素和块级元素有什么区别,如何相互转换? 一般通过display属性来区分块级元素和行内元素,block代表块级元素,inline代表行内元素. 块级元素: 1.内容独占一行. 2.w ...
[css] 行内元素可以设置padding和margin吗？
[css] 行内元素可以设置padding和margin吗? 行内元素的纵向padding和margin都是不考虑的,这是css规范定义的. inline元素确实可以设置垂直方向的 padding 和 ...
php开发是可视的吗,javascript,html_Jquery判断页面元素是否在浏览器的可视区域内，javascript,html,css,html5 - phpStudy...
Jquery判断页面元素是否在浏览器的可视区域内前端开发中,有时需要判断某个元素是否在浏览器的可视区域内,或者是否已经滚动出了可视区域.首先想到的便是javascript操作,原生方法自然可以,不过 ...

android 内凹的圆角,css实现内凹圆角样式

android 内凹的圆角,css实现内凹圆角样式相关推荐

最新文章

热门文章