css3实现边框圆角内凹效果

最新推荐文章于 2024-04-04 02:19:05 发布
最新推荐文章于 2024-04-04 02:19:05 发布
阅读量6.4k 收藏 16
点赞数 3
分类专栏： css3 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liliy__/article/details/107525300
版权
本文介绍了如何使用CSS3实现边框中心的内凹圆角效果，通过五个步骤详细解析了实现过程，包括使用伪元素、设置边框颜色、定位以及透明边框和旋转角度的应用。
摘要由CSDN通过智能技术生成

我们知道在边框的四个角实现圆角可以用 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
    评论
专栏目录
CSS 内凹圆角平滑过渡特效--Html5 + css源代码
我的昵称：程序员SUMER（全网同名）
06-26 297
CSS 内凹圆角平滑过渡特效--Html5 + css源代码
CSS3黑科技 - 内凹圆角
热门推荐
Jepson_鹏鹏的专栏
10-14 2万+
CSS3 黑科技 - 内凹圆角 - 径向渐变实现圆角，大家一定都会做，border-radius, 内凹圆角如何实现？可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解
CSS3径向渐变radial-gradient实现波浪边框和内倒角
weixin_33919950的博客
02-15 1780
前言 大佬给了一张优惠券图片(如下图)，我一看，这波浪型的边框和内倒角用css写不出来吧，遂向大佬说明并要ui切图，大佬回答：css3可以实现。好吧，大佬都说可以实现了，还不赶紧去求谷哥，度娘。 实现内倒角 上代码，然后解释代码 &lt;div class="radial-gradient"&gt;&lt;/div&gt; &lt;st...
CSS3实现内凹圆角的实例代码
09-24
本篇文章主要介绍了CSS3实现内凹圆角的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3 边框实现圆角内凹效果 边框内凹圆角效果
gzyzwx的博客
01-19 7478
border-radius: 20px; 会有圆角效果，但是效果是向外的； 效果截图：（移动端展示也一样） 想要实现 （边框圆角内凹效果） 查阅资料，暂无属性可设置，只能自己撸；（思路是实现四个圆角然后遮挡在四个边角，实现。） 注意有坑 实现方案一 <html> <head> <meta name="viewport" content=...
lisp 发凹圆角_你知道怎么利用css实现内凹圆角么
weixin_42213784的博客
12-30 368
本文利用径向渐变来实现背景透明的内凹圆角。基本线性渐变div {height: 100px;width: 200px;background-image: linear-gradient(90deg, red, blue);}从左到右的红到蓝渐变加百分比调整渐变范围div {height: 100px;width: 200px;background-image: linear-gradient(90...
CSS设置边角凹陷
weixin_45929885的博客
08-29 3576
CSS设置边角凹陷 一. 利用border-radius border-radius: 20px; 这样虽然可以,但是设置边框的时候需要注意: border-right:1px red solid; 边框同样也是弯的, 如果想要设置竖线: outline:1px red solid; 二. radial-gradient 利用辐射变化来调整 background-image: radial-gradient(circle at right top, #fff 50px, #0a2c8f
css 圆凹角_这种凹角用css3如何实现
weixin_39638086的博客
12-22 120
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...
纯CSS3按钮3D效果
06-24
下面我们将详细探讨如何通过CSS3实现这种效果。 首先，我们需要理解CSS3中的关键属性和技术。3D效果主要依赖于`transform`属性，它允许我们对元素进行旋转、缩放、平移等操作，其中`perspective`属性用于设置3D空间...
css3实现3d凹凸按钮.zip
07-03
"css3实现3d凹凸按钮.zip"这个压缩包就是一个实例，展示了如何利用CSS3的特性创建具有立体感的按钮。这个实例主要涉及以下几个核心知识点： 1. **CSS3伪类选择器**：在实现3D按钮时，我们通常会用到`:hover`、`:...
纯CSS3实现的灰色3D效果按钮源码.zip
11-20
本资源“纯CSS3实现的灰色3D效果按钮源码.zip”提供了一种仅依赖CSS3技术来创建具有真实感的3D效果灰色按钮的方法。这个源码包对于前端开发者来说非常有价值，因为它展示了如何利用CSS3的新特性来提升用户体验，增强...
CSS 美化表格边框为凹陷立体效果的实现方法
09-05
个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。
css实现div内凹角样式的示例代码
11-21
平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。 用到的属性则是background或background-image结合径向渐变radial-gradient。示例： background-image: radial-gradient(200px at 50px 0px, #fff 50px, #4169E1 50px); 而对于径向渐变，主要是3个参数控制。 一个是原点和大小。大小类似border-radius的感觉，原点使用at表示可以指定点的坐标，或使用left、
CSS凹型导航按钮效果的实现代码
09-24
在本文中，我们将探讨如何使用CSS来实现一种独特的凹型导航按钮效果。这种效果通常用于增强用户界面的视觉吸引力和交互性。通过以下步骤，我们可以创建一个带有圆角和底部凹陷的导航条。 首先，我们需要创建HTML...
CSS实现内凹圆角，从而实现圆角边框
zhifanxu的专栏
08-25 1779
使用了radial-gradient属性。
css边框内凹圆角，解决优惠券的边框问题
weixin_30740581的博客
09-28 838
关于css边框内凹圆角，找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ background:#999 } .raidal1 { height: 100px; width: 100px; backgro...
css内凹圆角
西洲
11-22 1万+
1、border-radius 知识点： 1.1、简单语法： border-radius：length/persentage； js语法：object.style.borderRadius="5px" border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂...
CSS边框塌陷
Yes_You_Can 的博客
02-16 401
css问题记录
CSS3实现内凹圆角的实例代码，【干货】
最新发布
2401_84023604的博客
04-04 855
可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用 CSS 生成一个背景透明的内凹圆角。应用时可以用伪元素设置，然后用绝对定位，子绝父相，调整位置，组合成想要的效果。/* 径向渐变主体 *//* 径向渐变主体 */从左到右的红到蓝渐变。
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提供了多种方式来实现内凹圆角边框，我们可以根据具体需求选择适合的方法来实现。以上只是一些常用的方法的示例，可以根据实际情况进行调整和扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值