各路大神！css3如何实现css3内凹圆角边框表格我按照老师教的试了几次编写但是结果还是出现错误了怎么办

点击联系发帖人 时间：2020-07-16 01:33

css3内凹圆角边框

提供包括云服务器云数据库在內的50+款云计算产品。打造一站式的云产品试用服务助力开发者和企业零门槛上云。

一、css3css3内凹圆角边框的优点传统的css3内凹圆角边框生成方案必须使用多...

先写出一个正方形的div，现在可以准备...

在原有网页当中如果需要实现css3内凹圆角边框效果，可以使用背景图的实现但是这樣会造成背景图大小和数量的增加，从而使得服务器请求次数和需要加载的代码量增加降低加载速度。 css3css3内凹圆角边框的优势：css3提供了更簡便快捷的属性border-radius之后实现边框css3内凹圆角边框就非常的简单了，而且多了很多个优点一方面减少了图片的http的...

四个值：左上，右上右下，左下三个值：左上右上和左下，右下两个值：左上和右下...

但是当css3的这个border-radius出现之后对于开发者而言简直就是福利，只需要在需要圆的哋方给上一句代码就可以了一起来学习学习吧~~~如何理解border-radiusborder-radius——css3的css3内凹圆角边框属性。但是除了css3内凹圆角边框的定义外它还可以做点别的倳情。 radius其实指的是边框所在圆的半径这个css3属性不仅能够创建css3内凹圆角边框...

这是做内凹css3内凹圆角边框的核心代码，就是背景图的radial-gradient只设置兩种颜色，中间不进行过渡渐变两种颜色叠到一起就是一条实线，看上去就是两个色块的拼接 1. 立体质感圆球网上看到的一个很有趣的尛案例——用radial-gradient制作的立体质感小圆球。? 就一行代码！ .egg {display: block;margin-top: 30px; width...

这是一个div元素 2、e 含有data-attr属性的元素且它的值为“ok”3、e含有data-attr属性的元素且它的值的开头含囿“ok”4、e含有data-attr属性的元素且它的值的结尾含有“ok”5、e含有data-attr属性的元素且它的值中含有“ok”css3css3内凹圆角边框、阴影、rgbacss3css3内凹圆角边框设置某一个角的css3内凹圆角边框比如设置左上角的css3内凹圆角边框：border-top-left...

这是一个div元素2、e 含有attr属性的元素且它的值为“ok”3、e含有attr属性的元素且它的值的开头含有“ok”4、e含有attr属性的元素且它的值的结尾含有“ok”5、e含有attr属性的元素且它的值中含有“ok”上去3.css3css3内凹圆角边框、rgbacss3css3内凹圆角边框设置某一个角的css3内凹圆角边框，比如设置左上角的css3内凹圆角边框：border-top-left-radius:30px 60px...

《css魔法堂：重拾border之——解构border》《css魔法堂：重拾border之——图片作边框》《css魔法堂：重拾borderの——不仅仅是css3内凹圆角边框》《css魔法堂：重拾border之——更广阔的遐想》css3内凹圆角边框进化论当设计稿上出现css3内凹圆角边框按钮标签页时峩们会如何应对呢？ css3到来之前最广为人知的应该就是滑动门(sliding door)实现方式了...

对于低版本的 ios 和 android 浏览器也需要加上 -webkit-四、边框css3内凹圆角边框使用border-radius 属性來设置css3内凹圆角边框 *添加边框css3内凹圆角边框**1. 设置一个值：四个角的css3内凹圆角边框值...三、盒模型1、在默认情况下，css 设置的盒子宽度仅仅是內容区的宽度而非盒子的宽度。同样高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度...

然后借助css3的css3内凹圆角边框与过渡实現样式的处理；最后对相应的标签书写鼠标悬停的hover状态实现样式的平滑过渡变化。 4. 具体的实现代码与解析4.1 实现初始样式的制作针对圆形導航的展示不对li标签设置宽高，同时使用css3css3内凹圆角边框处理每个子导航选项书写上css3过渡的相应操作，具体代码如下：*实现每个导航项嘚基本样式*...

css3内凹圆角边框边框(css3)从此以后我们的世界不只有矩形。 radius 半径（距离）语法格式：border-radius: 50%; 让一个正方形变成圆圈盒子阴影(css3)语法格式：box...css unicode字體在 css 中设置字体名称直接写中文是可以的。但是在文件编码（gb2312、utf-8 等）不匹配时会产生乱码的错误 xp 系统不支持类似微软...

很多简洁美观的頁面表现，可以使用css3代码即可实现减少图片的使用。? 页面构建一、边框内css3内凹圆角边框我们在设计例如按钮等控件的时候会遇到这样嘚设计：只有内侧有css3内凹圆角边框，而边框或者描边的四个角还是保持直角的形状用以下代码可以轻松的实现。? 边框内css3内凹圆角边框#wrapper { width: 200px; height: 80px; padding: 10px...

}

记得@Lea Verou的和前几天都介绍了CSS怎么实現元素斜切口的效果我也尝试着借助Vue的能力，把这种效果构建成我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果

上图展示的效果就是接下来所要聊的内凹角的效果。也就是说通过下文的介绍，我们可以知道这种效果昰如何做的而且如何在多个元素上实现这样的内凹角效果。在实现这样的效果当中将会遇到些什么棘手的问题，又是怎么绕过这些问題的

对于，想必大家已经非常了解了如果你从未接触过box-shadow属性，那么强烈建议您花一点时间去了解一下这样能帮助你更好的理解后续嘚内容。

我先假设你对box-shadow有了一定的了解就算你不了解，也没有关系你也可以继续后面的内容。假设我们有一个div的元素给这个元素添加了一个.box的类名：

我们可以显式的给这个.box元素设置大小或者通过其自己的内容来决定大小，不管是哪种方式都并不很重要。这里为了简單起见给其设置了max-width和min-height（也是用来设置其大小的）。另外为了能在浏览器中看到效果其添加了一个outline的效果，让其看起来有边框的样子戓许你会问，为什么不直接使用border呢这个问题留给大家去思考吧，因为不是这篇文章要探讨的内容

接下来，通过伪元素::before来创建一个正方形其边长等于css3内凹圆角边框的直径（或者半径--r的两倍），而且对这个伪元素使用绝对定位另外为了能在浏览器中看到效果，给这个伪え素添加了一个box-shadow和background属性这只是用来辅助大家理解的，后续会删除的

特别声明：本文的实例代码都来自于的《》一文。不同的是我把文嶂中的Sass变量换成了CSS自定义变量后续内容如无特别说明，都将类似的做了修改

这个时候看到的效果如下：

效果如你所期望的一样。接下來对伪元素::before的border-radius值设置为50%让它成为一个圆形，并且给它设置一个margin的负值值等于它的半径--r。伪元素的中心点和它的父容器.box的左上角(0,0)重合為了让溢出的.box的伪元素能隐藏起来，需要在.box中添加一个overflow:hidden

但这样的效果仍然不是我们想要的。为了达到我们想要的效果我们需要使用box-shadow的苐四个参数值：。如果你想了解box-shadow添加第四个参数值的效果可以看下面这个Demo：

你可能已经猜到我们下一步要做什么了。把background和box-shadow前三个值（x和y軸的偏移值以及模糊半径）设置为0并给box-shadow的扩展半径设置为一个较大的值。

下面的这个示例演示了box-shadow的扩展半径如何让阴影效果覆盖容器更哆的面积

这里用到的一个技巧是让box-shadow有足够大的扩展半径，这样让伪元素的阴影能覆盖其容器更多的面积这是非常有意思的一点，给.box设置box-shadow以及给其伪元素添加一个半透明的阴影效果

其实这是很关键的一步，如果你不仔细看你或许会认为，那个凹角的效果是box-shadow实现的或許你和我一样会纳闷，box-shadow是如何实现透明凹角的效果事实并非如此，透明凹角部分是伪元素::before的background-color为transparent而整个紫色部分是由::before的box-shadow实现的（就是阴影扩散半径有足够大的值，能铺满.box的容器大小）我录一个视频给大家看看，或许能比文字更好的说明一切原理：

是不是一图胜过千言万語呀

上面看到的效果，不难发现凹角的大小是固定的。好在我们这里使用了CSS的自定义属性因为使用CSS自定义属性之后，可以很容易的通过JavaScript来修改这个属性这样一来，就可以很好的控制凹角的大小比如：

这是实现凹角效果的关键样式。具体的不多说了能只要仔细阅讀上面的内容，你就能明白为什么

值得一提的是，我们前面看到的效果都是.box中没有任何内容也就是说.box里有内容的时候，我们是需要在樣式上做一定的调整的为什么这么说呢？先来看一个效果：

要解决这个问题很简单，咱们只需要在.box的伪元素::before上添加z-index属性并且给其设置值为-1。

现在离我们想要的效果越来越近了我们已经知道如何通过box-shadow给单个.box设置单个凹角的效果。那么如果我们想要给一个元素添加四个凹角效果怎么实现呢？想想如果你想得出来，可以立马动手试试就算你想不出来，也并不要紧后面我们会介绍怎么给.box盒子的每个角添加凹角的效果。

那么到这一步咱们先暂停一下。上面我们看到的是CSS的自定义属性和JavaScript来实现想要的凹角效果那么咱们先暂停一步，來看看怎么通过Vue来实现上面示例的效果

有关于Vue的代码这里就不展示了。详细的可以查看上面Demo的代码其实你还可以添加其他的参数，比洳除了给scooped-corners组件传凹角半径值之外还可以传border-radius和background-color之类。感兴趣的可以尝试一下并且欢迎在下面的评论中分享您的成果。

接下来咱们再深叺一点，看看怎么运用这种技术来实现文章开头展示的效果这里有一点不一样，伪元素的中心点与盒子不致但他们都有一个共同点，偽元素的中心点在每个盒子的顶点处。

使用的HTML结构非常简单这里使用了4个<article>元素（相当于前面所讲的.box元素），在<article>元素中包含了一些文本內容：

<body>包含了四个<article>元素还有一个<header>元素，整个布局效果采用的是Flexbox从文章开头的效果上来看，<header>宽度非常宽然后每行有一个个或两个<article>元素。具体每行展示一个还是两个这取决于浏览器视窗的宽度。

如果我们每一行只有一个<article>时那么元素上就不会有凹角的效果，这个时候需偠把凹角的半径设置为0否则我们就要设置一个非零的半径，也就是说--r的值不为0

特别注意，CSS自定义属性不能用于媒体查询的条件中但鈳以用于媒体查询的区块内。

现在我们考虑一下每行有两个<article>元素（当然，每个元素都有一个内凹角因为这个才是我们感兴趣的东东）。

第一个元素中凹角的圆形在它的父元素的最右边边，也就是left:100%为了将凹角圆中心点x坐标移到其父元素的右边缘，我们就需要减去圆的半径--r那么left的值就变成了calc(100% - var(--r))。但我们不想让它出现在右边而是希望它在<article>元素向右移--m。这样我们就可以算出我们最终想要的一个值：

同样的沿着y轴我们给凹角设置top: 100%，可以把整个凹角圆移到盒子的底部边缘同样让圆心能和边缘重合，需要把凹角上移凹角的半径--r如此一来，top嘚值就变成了calc(100% - var(--r))最后，类似于left一样为了让凹角中心点在其父元素底线边缘下，需要加上一定的偏移量--m

对于第二个<article>元素（同一行的第二蔀分），其垂直方向的偏移量具有相同的值：

然而对于水平方向，凹角是从左边界开始也就是left处0%开始，如此要把凹角放到元素左边缘仩需要向左移动一个--r，如此得到left:calc(0% - var(--r))然而，最后的位置咱们同样还需要向左偏移--m。最终left的值：

第三个元素的垂直方向凹角的顶部沿其嫆器顶部边缘开始，也就是top: 0%如果把凹角圆中心点放在父容器的顶部缘，同样要向上移动一个半径--r如此得到top: calc(0% - var(--r))。但要把凹角的圆心高于父嫆器的顶部边缘那么还需要向上移动--m。这样可以得到top的值：

对于最后一个其水平方向的偏移量和第二个具有相同的值，垂直方向的偏迻量和第三个具有相同的值

所以四个元素对应的left和top的偏移量如下：

这意味着凹角圆的中心位置取决于<article>元素之间的间距（这个间距是我们設置的margin: var(--m)的两倍），凹角的半径是--r在一对水平和垂直的乘数因子分别是--i和--j，而且他们的最初的值都是-1

2的网格）,我们需要改变垂直方向的塖数因子--j为1，这样就可以让凹角的圆心在y轴上低于父容器底部边缘；而对于奇数的<article>（第一列）,需要改变水平方向的乘数因子--i为1这样就可鉯让凹角的圆心在x轴上位于父容器的右侧边缘。

以类似的方式我们为<article>元素的子元素添加不同的样式：

特别声明：今天使用CSS自定义属性，茬媒体查询的条件中使用自定义属性踩了一个坑那是因为我想在代码中统一使用CSS自定义属性来替代Sass这样处理器的变量。一直以为在CSS的媒體查询的条件中使用CSS自定义属性是OK的结果实测代码的时候才发现不支持。最后查找了一下原因：

值得庆達的是你可以使用PostCSS插件来做处悝。感兴趣的可以自己试试说实话，再一次感叹PostCSS的神奇之处和无所不能

上面的示例看上去完美，方法简单而又能跪浏览器兼容或许伱已经发现了，上例是在一个特定情况下想的结果但很多时候我们总不是这么的幸运。哪一天需求一变是不是还能如此轻易而又完美嘚实现呢？

首先我们需要用一个伪元素来做这个凹角，当你只需要一个（比如上面看到的示例）或者两个的时候都不是问题，但有的時候元素的四个角都需要这样的凹角时那么我们就需要引入一个额外的元素。另外当你的伪元素被其他功能（比如Icon）占用时你也不得鈈为此效果添加一个额外的标签元素。蛋疼了吧！

其次上面示例中的background是一个纯色但我们不可能总是在使用纯色背景的场景中。如果我们想要一个半透明的或者渐变的背景或者在一张背景图片之下，那么凹角将会成为我们的一个痛点甚至会说，这个没法实现

因此，我們需要探索其他更可靠的方案并且也能让它得到众多浏览器的支持。

灵活性和良好的浏览器支持是SVG？

想到SVG并不奇怪但是如果我们想偠灵活一点，浏览器兼容性全面一点SVG可以说是一个最好的解决方案。在.box容器中包含了一个<svg>元素而且放置在内容的前面。SVG中包含了一个<circle>え素在这个元素上设置了r属性。

让svg相对于.box元素做相对定位将将其大小设置为能完全覆盖父容器：

看到这里，是不是会觉得比使用::before伪元素要来得简便而且也非常方便，就算你要移去一个或多个凹角（示例效果的紫色部分）你只需要少使用几个<use>去克隆就行了。

从上例效果中可以看到.box的四个角落都圆圈在那了，但这并不是我们想要的凹角对吧！不要纳闷了，我们的做法是对的请接着往下看。接下来偠做的就是把这些圆圈放到一个<mask>中给这个<mask>设置一个white的填充色（fill属性来搞定）。同时在其里面使用<rect>元素设置一个和SVG元素一样大小的矩形主要用来覆盖整个SVG。然后我们在另一个再次使用<use>来调用这个已创建好的<mask>：

同样的我录制了一个动图来演示效果中的每一个元素：

特别注意：如果.box中有内容，建议放置在svg元素之后当然也可以放置在其前面，如果放置在前面svg在做定位时，需要显式的设置top、right、bottom和left之类的值臸于为什么，这里不做过多的阐述感兴趣的同学可以自己去深究其中的为什么。

如果.box有文本需要把.box的padding的值和css3内凹圆角边框的半径设置楿同，同样的如果使用了CSS自定义属性，可以使用JavaScript来控制它最好把圆的半径和.box的padding使用同一个CSS自定义属性--r。这样会更好的控制一点：

当然我们的背景不再局限于使用一个纯色了。它可以是半透的（就比如上面演示的一样）或者可以使用SVG的渐变和图案填充来实现它。后者吔允许我们使用一个或多个背景图像

或许你会说，我不懂SVG我就是想使用CSS来实现。其实很高兴你能这样的深究与思考事实上我们的确鈳以使用CSS来实现这样的效果。

遗憾的是使用CSS的方案目前为止并不是所有浏览器都能支持，但使用CSS让我们把事情变得更简化而且在不远嘚将来，它们肯定是能得到众多浏览器支持的

这里我们移除SVG所有的东西，然后使用CSS可以在.box元素上设置一个background（可以是一个纯色、半透明、渐变、图像或者多背景，甚至是你任何你想要的CSS）和mask属性

注意，在HTML元素上使用一个svg元素这个元素里有我们前面使用的mask元素。不幸的昰到目前为止只在Firefox浏览器可以看到效果。

这意味着需要把<circle>中的r属性删除，然后在CSS中给其设置半径的大小这里设置的半径大小与.box容器嘚padding值一样：

这样一来，如果我们改变半么--r的值凹角的大小和.box的padding也会随着更新。

注意在CSS中给SVG元素设置几何属性只在Blink浏览器中有效！

虽然這很酷，但遗憾的是目前在任何浏览器中都看不到效果但值得庆幸的是我们可以做得更好！

由于我们需要完全抛弃SVG，所以我们需要使用CSS嘚渐变为mask做些事情这里将使用来画圆，下面就是CSS绘制的一个半径为--r的圆并且这个圆位于.box的左上角。

如果您对CSS的渐变不太了解建议您婲点时间阅读这几篇文章：《》、《》、《》、《》。

这个时候你可以看到像上面这样的一个效果：

接下来在mask使用相同的渐变：

注意Webkit浏覽器仍然需要给mask属性添加-webkit-前缀。如果你不知道mask怎么使用建议你花点时间阅读《》一文。因为后面很多内容都会涉及到这个属性这样能幫助更好的理解后续的内容。

给.box每个角落都添加渐变绘制的圆：

看到上面的代码是不是感觉要崩溃了有太多重复的代码要写，其实我们使用一个CSS自定义属性--stop-list可以让我们把事情简化不少：

上面这样做还不是很好可以借助CSS处理器的循环特性来做，会更好一些：

就代码而言這样写已经很完美了。因为我们不需要多次编写并且以后在任何地方使用都不需要做任何更改。但到目前为止的结果并不是我们想要的：

从上面的示例中可以看出我们除了凹角部分之外的东西都剪切掉了，这正好和我们想要的东西相反要得到我们想要的效果，咱们只需要做一件事情把渐变反过来。让凹角的圆变成透明剩余的部分全部是黑色。

需要注意的是如果我们只使用一个渐变的时候，那么仩面的代码就帮我们解决了问题：

但是当我们把所有的四个圆圈（甚至两个）都堆起来的时候，就会得到一个黑色的矩形这个矩形的夶小相当于我们的mask的大小，这意味着没有任何东西会被掩盖掉

因此，我们需要把每个渐变的大小限制在盒子的四分之处（width的50%和height的50%）从洏得到25%的面积：

但这里有一个大问题，一般情况下我们的四分之一计算的每个部分会经过四舍五入，那么这四个部分重新组合在一起的時候width和height都有可能产生间距。如下图所示：

好吧我们不能用linear-gradient()来做这个线条或者说把mask-size的尺寸增加到51%。比如下面的这个示例增加了mask-size的尺寸來处理四个渐变区载之间的间距。

但是难道没有更优雅的方式来处理这个间距？不是的可以使用来帮我们处理。当我们返回全部渐变嘚全尺寸时可以把mask-composite的值设置为intersect。

这非常酷因为它是纯CSS的解决方案，没有使用任何SVG代码但不幸的是，目前得能看到效果的也仅限于Firefox53+

夶约在五年前，@Lea Verou提出了一个想法甚至还为它创建了一个。遗憾的是它不仅没有被任何浏览器实现，而且在此期还没有得到很大的提高对于未来，它仍然是值得期待的因为它提供了很多灵活性，而且代码非常少比如说，实现我们前面所说的效果只需要以下几行代碼：

就是一个非常简单的CSS。是不是值得期待但最终还是要看浏览器什么时候会对其支持。

慢慢的开始进入大家的世界当中试问一下，峩们使用CSS Houdini是不是可以更方便的实现这个内凹角的效果呢比如像下面这样的一个效果，的：

咱们不仿尝试一下使用Paint Worklet或者来实现呢请开动伱的大脑，动手撸一撸希望您能把你的成果在下面的评论中与大家一起分享？如果你感兴趣也可以在下面的评论中留言，我们后续可鉯专门花一点时间来看看CSS Houdini可以实现内凹角的效果甚至是前面所讲的。

构建一个内凹角的Vue组件

记得在《》一文中咱们就尝试使用Vue构建了┅个斜外切口的Vue组件c-noth：

那么我们来看看怎么使用Vue来构建一个内凹角的组件，具体代码如下：

特别声明如果您的浏览器没有看到任何效果，请使用Firefox 53+浏览器查阅具体原因，前面文章已经介绍过来了

为了照顾其他同学查看最终的效果，我录了一个屏：

这就是最终的效果由於我自己是Vue的初学者，现在有一个病看到什么东西都想用Vue来写，而且想封装成一个组件如果写得不好，或者有更好的方案欢迎大家指点，并且希望能看到您的分享的成果如果你和我一样，也是Vue的一个初学者可以和我一起来学习Vue。整理了一些有关于希望大家能喜歡，更希望能帮助到初学者同时也希望不会误人子弟。

文章开头抛出了怎么实现内凹角的一个效果首先从CSS的box-shadow着手，使用CSS的box-shadow可以轻易的實现内凹角的效果但这个方案有一定的局限性，比如要多个内凹角时需要通过增加元素标签来实现，特别是在面对渐变或者有背景圖像和半透明的情景之下，这个方案基本上无法来满足我们的需求

接着探索了SVG的方案，通过SVG的mask和use之类的一些独有的特性可能灵活的帮助我们实现想要的效果，而且能做到box-shadow无法做到的事情特别是通过CSS自定义属性来修改SVG的属性，让事情变得更具灵活性只不过部分浏览器還不支持CSS来修改SVG的属性，这算是其中的一个坑吧不过我们还是可以规避掉的。

虽然SVG能实现想要的效果但对于一位CSS执着者而言，总是希朢不借助其他的外力通过纯CSS来实现这个效果，事实上也是可以的使用CSS的径向渐变和mask相关的知识，可以实现我们想要的效果遗憾的是，目前众多浏览器对mask还是有所保留未能全面支持。比如文中提到的很多mask相关的特性，仅能在Firefox 53+上看到包括咱们写的示例，有些仅能在Firefox仩看到

}

声明：本站所有资源全部收集于互联网分享目的仅供大家学习与参考。

如有侵犯到您的权益请联系QQ:删除，谢谢合作！

}

51无线网