css3实现边框圆角内凹效果

最新推荐文章于 2023-06-08 11:14:13 发布
最新推荐文章于 2023-06-08 11:14:13 发布
阅读量6.3k 收藏 16
点赞数 3
分类专栏： css3 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liliy__/article/details/107525300
版权

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?
效果如下图:
边框圆角内凹效果
要实现上图的效果可以分为五个步骤:

  • 用一个 div 作为大容器, 设置 1px 的边框及圆角
  • 利用伪元素 ::before, ::after 创建两个边框 1px 且边框颜色同大容器的圆, 圆的背景色同该模块的背景色(障眼法)
  • 子绝父相, 将两个圆分别定位在左右两边
  • 将伪元素的其中两条边设置为透明(同三角形的做法)
  • 通过 transform: rotate() 设置合适的旋转角度

源代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8
最低0.47元/天 解锁文章
liliy__
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3实现内凹圆角的实例代码，【干货】
2401_84023604的博客
04-04 655
可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。应用时可以用伪元素设置，然后用绝对定位，子绝父相，调整位置，组合成想要的效果。/* 径向渐变主体 *//* 径向渐变主体 */从左到右的红到蓝渐变。
css内凹圆角
热门推荐
西洲
11-22 1万+
1、border-radius 知识点： 1.1、简单语法： border-radius：length/persentage； js语法：object.style.borderRadius="5px" border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂...
css3 边框实现圆角内凹效果 边框内凹圆角效果
gzyzwx的博客
01-19 7362
border-radius: 20px; 会有圆角效果，但是效果是向外的； 效果截图：（移动端展示也一样） 想要实现 （边框圆角内凹效果） 查阅资料，暂无属性可设置，只能自己撸；（思路是实现四个圆角然后遮挡在四个边角，实现。） 注意有坑 实现方案一 <html> <head> <meta name="viewport" content=...
CSS3实现内凹圆角的实例代码
09-24
本篇文章主要介绍了CSS3实现内凹圆角的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css如何绘制内凹的弧线
qq_33859479的博客
06-08 2822
原理就是用伪类元素把线旁边添加一个border-radius弧度的和背景色相同颜色的椭圆，把内凹的弧度重叠出来。
css实现凹圆圈，小透明
Minyoung 的博客
05-24 2916
先来效果图 实现优惠券的方式来展示，直接上代码，css我用了less .coupons{ width: 100%; height: 100px; margin: 15px 0; position: relative; display: flex; justify-content: space-between; ...
lisp 发凹圆角_你知道怎么利用css实现内凹圆角么
weixin_42213784的博客
12-30 360
本文利用径向渐变来实现背景透明的内凹圆角。基本线性渐变div {height: 100px;width: 200px;background-image: linear-gradient(90deg, red, blue);}从左到右的红到蓝渐变加百分比调整渐变范围div {height: 100px;width: 200px;background-image: linear-gradient(90...
css3实现圆角边框
03-21
css3中的边框一般多为矩形，也可以通过设置实现圆角边框的效果，通过border-radius:;通过设置该属性值得大小改变边框的圆角大小，从而达到自己需要的圆角边框效果
关于css3如何实现圆角边框
01-08
css3圆角边框 效果图 代码 test.html 说明：由于该样式篇幅较小，将css样式与html结构写在一个页面，建议分开写！ 步骤一 先新建一个盒子模型，为了将其居中，设置好内外边距 步骤二 设置宽度、高度、背景颜色 ...
CSS3圆角边框和边界图片效果实例
09-24
主要为大家详细介绍了CSS3边框的不同效果实现代码，包括CSS3圆角边框、盒阴影、边界图片的制作方法，感兴趣的小伙伴们可以参考一下
CSS3轻松实现圆角效果
09-27
圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一。今天，小编为大家介绍CSS3提供的可以将矩形变为圆角矩形的一个属性，需要的朋友参考下吧
css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
Honiler的博客
07-12 2402
​核心知识点：CSS radial-gradient() 函数，用径向渐变创建 "图像"
css 圆凹角_这种凹角用css3如何实现
weixin_39638086的博客
12-22 111
css#a {width: 150px;height: 300px;background: radial-gradient(circle at top left,transparent 15px, #e6e4b7 0) top left,radial-gradient(circle at top right,transparent 15px, #e6e4b7 0) top right,radial...
css实现边框内凹
BigDippers的博客
02-27 3470
<div class="box"> <div class="box2"> </div> </div> 首先创建好盒子结构 .box{ width:100px; height:100px; border:1px solid black;/*设置好外边框*/ margin:auto; } .box2{ position:relative;/*相对于父级对齐*/ left:-1px;/*将位置移动-1的目的.
纯css实现内凹圆角-书签笔记本模式
weixin_39370315的博客
03-09 929
纯css实现内凹圆角，不定时更新不同设计版本模式代码
不规则div之<div两垂直边向里凹陷>
夏天的甲虫
12-23 3361
今天公司网站上要做一个页面，设计图就有设计到垂直边向里凹陷的很多块，而且这些块高度是不一致，如果直接切图来做背景很不现实，还是得用样式来实现这个效果。下面就来记录一下实现的方法，以便自己以后重用。如果你看到了这篇文章，也希望你能给我一些好的建议。（对于IE只适用于IE9）
CSS3径向渐变radial-gradient实现波浪边框和内倒角
weixin_33919950的博客
02-15 1750
前言 大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实现了，还不赶紧去求谷哥，度娘。 实现内倒角 上代码，然后解释代码 &lt;div class="radial-gradient"&gt;&lt;/div&gt; &lt;st...
css3(border-radius)边框圆角详解
qq_31261699的博客
03-03 1229
border-top-left-radius: 50px 100px;//第一个值表示水平半径，第二个值表示垂直半径。border-radius: 100px 25px 80px 5px / 45px 25px 30px 15px;//第一个/前表示的是四个角的水平半径,/后四个值是四个角的垂二半径 传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现
css3内凹圆角边框
最新发布
09-15
CSS3提供了多种方式来实现内凹圆角边框。 首先，我们可以使用`box-shadow`属性来为元素创建内凹效果。通过设置合适的颜色、模糊度、偏移量和扩展半径，我们可以模拟出内凹的效果。例如，我们可以使用以下样式： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值