CSS实现边框内圆角

先上效果图：

要想实现上图所示的效果，我们首先想到的是通过两个元素定义不同的背景色和边框样式来实现，这是十分简单的一种实现方式，但是要求我们使用两个元素，如果只用一个元素能不能实现所要的效果呢？答案是肯定的。
在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现上图的效果参考：多重边框
css代码：

.div_border{background: rgb(216, 188, 151);border-radius: 8px;box-shadow: 0 0 0 4px #655;outline: 6px solid #655;}

注意：
box-shadow属性指定的扩张值不一定等于描边的宽度，我们只需要指定一个足够填补“空隙”的扩张值就可以了。扩张半径的大小应为 ( 2 − 1 ) r {(\sqrt{2} - 1)}r (2 −1)r(r为圆角半径)，为了避免每次都要计算，我们可以直接使用圆角半径的一半

限制情况：

为了达到这个效果，扩张半径要小于描边宽度值，但是他有要比 ( 2 − 1 ) r {(\sqrt{2} - 1)}r (2 −1)r大，这意味着，如果描边的宽度比 ( 2 − 1 ) r {(\sqrt{2} - 1)}r (2 −1)r小，是无法达成该效果的。
若果边框不是纯色的，而是加一层纹理或者其他的效果，该方式不再适用，可以使用两种元素的方式很容易做到

补充：使用伪元素实现边框内圆角

.content { position: relative;height: 200px;widows: 400px;text-align: center;line-height: 200px;background: #FFF;border-radius: 30px;}.content ::before {content: '';position: absolute;top: -15px; right: -15px; bottom: -15px; left: -15px;background: #FAC;z-index: -1;}

CSS实现边框内圆角相关推荐

css用边框实现圆角矩形
今天要做一个圆角矩形的按钮,于是直接找圆角矩形的css实现方式,搞了半天,虽然也实现效果了,但是很复杂,需要用很多代码,后来突然想到以前做过的一个边框效果,也是圆角矩形,于是找了出来,发现这种办法相当 ...
div盒子边框圆角_div+css用边框实现圆角矩形(多样式)
简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: 复制代码代码如下: .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{}{display:block;ov ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
css里外边框与内边框_基本CSS边框
css里外边框与内边框 Every HTML element can be provided with a basic border via CSS, using one of 10 styles: ...
html 文本框css设置边框圆角
html 文本框css设置边框圆角如下图: css代码如下:input{border:1px solid black;width:295px;height:40px;border-radius:25p ...
html中div怎么加内边框,css怎么加内边框？
css怎么加内边框?下面本篇文章就来给大家介绍一下使用css加内边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用border属性配合box-sizin ...
CSS学习（四）—— 边框与圆角
七 .边框与圆角 1.边框 1)边框三要素边框属性即border属性 border属性需要三个要素:线宽度.线型.线颜色线宽度(border-width) 用长度来表示线型(border-sty ...

CSS实现边框内圆角

CSS实现边框内圆角

补充：使用伪元素实现边框内圆角

CSS实现边框内圆角相关推荐

最新文章

热门文章