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

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量4.2w 收藏 26
点赞数 2
分类专栏： css 文章标签： css html 内圆角 内凹圆角 
最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是通过径向渐变实现的。虽然能实现单个角，但是当四个角合在一起就很麻烦了。

上设计图

径向渐变实现：

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>

<meta charset="utf-8"/>

<title></title>

<style type="text/css">

.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 class="cro">

<div class="cro_left_top"></div>

<div class="cro_right_top"></div>

<div class="cro_left_bottom"></div>

<div class="cro_right_bottom"></div>

</div>

</body>

</html>

 

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

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

海天酱油zz
关注
  • 2
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
CSS3实现内凹圆角的实例代码，【干货】
2401_84023604的博客
04-04 800
可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。应用时可以用伪元素设置，然后用绝对定位，子绝父相，调整位置，组合成想要的效果。/* 径向渐变主体 *//* 径向渐变主体 */从左到右的红到蓝渐变。
android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）
weixin_30028221的博客
05-29 1124
最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是经过径向渐变实现的。虽然能实现单个角，可是当四个角合在一块儿就很麻烦了。上设计图css 径向渐变实现：htmlbackground:radial-gradient(40rpx at right bottom,transparent 50%,#1889F6 50%); 可是若是四个重合在一块儿，个人图片背景是渐变的，那么两个圆...
css 实现内凹圆角
weixin_43534452的博客
09-01 722
css
前端必会的 HTML+CSS 常用技巧 之 倾斜反圆角按钮的实现
ZhuangWei的博客
06-14 297
相信大家在开发过程中，会偶尔碰到一些这样的ui样式，但是吧又并不是给的切图，问了一下这个按钮没有切图哦，能切一下图么？然后被对方反问，这样的按钮你不会写？吐槽归吐槽，实现还是可以实现的；无奈，问题依旧是抛给了前端……
div凹角实现
weixin_30394333的博客
03-28 356
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .block{ back...
android 内凹的圆角,css实现内凹圆角样式
weixin_30952479的博客
05-29 872
最新开发遇到一个弹框，弹框中间有两个内凹的半圆，而且还是透明的，不能遮挡到底层的内容。基于这个需求，找到了一个比较好的实现方法。先上一下demo效果图：image.png实现这个效果主要是用了background-image 结合径向渐变radial-gradient。示例：background-image: radial-gradient(circle 10px at 0 100%, trans...
css 实现反向圆角
g841805的博客
04-29 744
源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title> </head> <body> &
css 外圆角旋转,外圆角实现（css）
weixin_27283495的博客
08-04 1060
效果图：![](https://box.kancloud.cn/725de3b318d013c51ff91ef7757f652b_260x99.png)`````````.test {position: relative;margin-top: 20px;}.left {position: absolute;top: 0;width: 50px;height: 50px;line-height: ...
css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
Honiler的博客
07-12 2636
​核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
CSS实现反方向圆角的示例代码
09-22
主要介绍了CSS实现反方向圆角的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3圆角样式分享自定义按钮样式
12-13
在这个例子中，我们将详细探讨如何使用CSS3实现一个带有渐变色、圆角以及特定阴影效果的自定义按钮。 首先，我们需要创建一个HTML结构，这里是一个`<input>`元素，用于创建按钮。这个按钮被赋予了`class="btn-style...
纯css3简单旋转风车动画特效特效代码
03-20
本篇将详细介绍如何利用纯CSS3实现一个简单而有趣的旋转风车动画特效。 首先，我们需要了解CSS3中的关键帧动画（@keyframes）规则，这是创建动画的基础。通过定义动画从开始到结束的一系列样式变化，浏览器会自动...
CSS属性列表.pdf
06-11
CSS提供了丰富的动画属性来帮助开发者实现这些效果。 1. **`@keyframes`**: 该规则用于定义动画的关键帧。通过`@keyframes`规则，我们可以指定动画在不同时间点的表现，从而实现动画效果。 - **示例**: ```css @...
flex：1
最新发布
m0_47999208的博客
07-25 374
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 348
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css 作业 2
没有 bug 的代码是不完美的！
07-25 699
写完了
CSS相关记录
oThrowsException的博客
07-24 771
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
css3内凹圆角边框
09-15
CSS3提供了多种方式来实现内凹圆角边框。 首先，我们可以使用`box-shadow`属性来为元素创建内凹效果。通过设置合适的颜色、模糊度、偏移量和扩展半径，我们可以模拟出内凹的效果。例如，我们可以使用以下样式： ```css .box { box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, 0.5); border-radius: 10px; } ``` 这将会为元素添加一个内凹的阴影效果，并且边框会有10px的圆角。 另外，我们也可以使用`border-image`属性来创建内凹的边框。首先，我们需要创建一个包含了阴影效果的图片资源，然后将其应用到元素的边框上。例如，我们可以使用以下样式： ```css .box { border-width: 10px; border-image-source: url(shadow.png); border-image-slice: 10; } ``` 上述代码将会为元素创建一个10px的内边框，并且使用名为`shadow.png`的图片来作为边框的样式。 除了上述两种方式，还有其他一些方法可以实现内凹圆角边框，例如使用`linear-gradient`属性或者使用伪元素来创建阴影效果。 总之，CSS3提供了多种方式来实现内凹圆角边框，我们可以根据具体需求选择适合的方法来实现。以上只是一些常用的方法的示例，可以根据实际情况进行调整和扩展。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值