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

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

上设计图

径向渐变实现：

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

但是如果四个重合在一起，我的图片背景是渐变的，那么两个圆角是需要两个div标签的。真是越想越不对。

最后百度到了这个：

原文地址：https://blog.csdn.net/u014230198/article/details/76620636?utm_source=blogxgwz0

实现效果

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

<html>

<head>

.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;

}

</style>

</head>

<body>

</div>

</body>

</html>

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

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

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

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）
最近写到小程序,设计方面有一个设计图涉及内凹圆角问题.网上百度好多种,都是经过径向渐变实现的.虽然能实现单个角,可是当四个角合在一块儿就很麻烦了. 上设计图css 径向渐变实现:html backgr ...
css边框凹圆角,你知道怎么利用css实现内凹圆角么
本文利用径向渐变来实现背景透明的内凹圆角. (视频教程推荐:css视频教程) 基本线性渐变div { height: 100px; width: 200px; background-image: li ...
css 实现内凹圆角
上图: 我们经常会去实现那种圆角的按钮,图片等等,但是想要实现这种内凹的圆角形状的块状还是比较复杂,我先讲讲思路: 第一,需要一个大块进行包裹,需要设置宽度和高度等: 第二,需要四个小块,来使用圆角的 ...
android 内凹的圆角,css实现内凹圆角样式
最新开发遇到一个弹框,弹框中间有两个内凹的半圆,而且还是透明的,不能遮挡到底层的内容.基于这个需求,找到了一个比较好的实现方法. 先上一下demo效果图: image.png 实现这个效果主要是用了b ...
java生成一个矩阵outline_border、outline、boxshadow那些事以及如何做内凹圆
border 边框是我们美化网页.增强样式最常用的手段之一.例如: .text { width: 254px; height: 254px; background-color: #33AAE1; bo ...
html怎么设置凹陷效果,如何在css中实现圆角内凹效果
如何在css中实现圆角内凹效果发布时间:2020-07-22 09:22:57 来源:亿速云阅读:122 作者:Leah 这期内容当中小编将会给大家带来有关如何在css中实现圆角内凹效果,文章内容 ...
css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
核心知识点:CSS radial-gradient() 函数,用径向渐变创建 "图像" 在开始些样式前,先在html代码放个div标签即可. <div class=" ...
css图形绘制，实现内凹圆角盒子中间凹陷为一个圆形
提示:以下是本篇文章正文内容,下面案例可供参考一.案例要求示例: 二.实现代码 1.代码如下(示例): <div style="display:flex">< ...
html单个圆角图片,CSS教程：一张图片实现圆角
CSS教程:一张图片实现圆角互联网发布时间:2009-04-02 19:33:53 作者:佚名我要评论网页制作Webjx文章简介:准备四个小容器,分别放小圆圈图片的左上.右上.左下 ...

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

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

最新文章

热门文章