android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）

最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是经过径向渐变实现的。虽然能实现单个角，可是当四个角合在一块儿就很麻烦了。

上设计图css

径向渐变实现：html

background:radial-gradient(40rpx at right bottom,transparent 50%,#1889F6 50%);

可是若是四个重合在一块儿，个人图片背景是渐变的，那么两个圆角是须要两个div标签的。真是越想越不对。小程序

最后百度到了这个：spa

实现效果设计

这里注意我截图，看看这个是这样的。代码实际上是这个样子的htm

blog

utf-8

.cro{

width: 100px;

height: 100px;

border: 1px solid #58C4E6;

position: relative;

}

.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{

position: absolute;

width: 20px;

height: 20px;

border: 1px solid #fff;

z-index: 1;

background: #fff;

}

.cro_left_top{

top: -1px;

left: -1px;

border-radius:0px 0px 20px 0px;

border-bottom: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_top{

top: -1px;

right: -1px;

border-radius:0px 0px 0px 20px;

border-bottom: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

.cro_left_bottom{

left: -1px;

bottom: -1px;

border-radius:0px 20px 0px 0px;

border-top: 1px solid #58C4E6;

border-right: 1px solid #58C4E6;

}

.cro_right_bottom{

right: -1px;

bottom: -1px;

border-radius:20px 0px 0px 0px;

border-top: 1px solid #58C4E6;

border-left: 1px solid #58C4E6;

}

其实做者的意图很简单，仍是用的原来的圆角熟悉，可是我把圆角挪动下位置那么不就ok了。

唉，自从有了百度，愈来愈赖。思考都变迟钝了

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）相关推荐

android 内凹的圆角,css实现内凹圆角样式
最新开发遇到一个弹框,弹框中间有两个内凹的半圆,而且还是透明的,不能遮挡到底层的内容.基于这个需求,找到了一个比较好的实现方法. 先上一下demo效果图: image.png 实现这个效果主要是用了b ...
css vue 内联_04-Vue基础-css和内联样式绑定
v-bind 及 class 与 style 绑定 1. 绑定 class 的集中方式 1.1. 对象语法给class设置一个对象,可以动态切换class.例如: var app = new Vue ...
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操作,原生方法自然可以,不过 ...
CSS 行内级元素和行内框
行内级元素(inline-level element),就是那些在源文档中不会形成新块的元素,这些元素的左右可以放置其他元素.典型的行内级元素有 span.em.strong.a,等等. 根据元素自身 ...

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）相关推荐

最新文章

热门文章