css3揭秘读书笔记--边框内圆角-优快云博客

本文介绍了两种在不增加盒子大小的情况下实现内圆角边框的方法。一种是通过设置父元素背景色及padding来形成边框效果；另一种则是利用outline和box-shadow相结合的方式。两种方法均不影响页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

边框内圆角

首先假设一个场景：需要一个容器，只在内测有圆角，而边框或描边的四个角在外部任然保持直角的形状。实现方式如下所示：

<div class="out" style="width:100px;height:50px;background:#655;padding:10px;">
	<div class="in" style="background:tan;line-height:50px;text-align:center;border-radius:10px;">
			圆角边框
	</div>
</div>

这种方式设计的较为巧妙，他的边框并非通过border来设置，如果通过border来设置，圆角与边框之间会有分析的。他是通过设置父元素的背景色，然后通过padding来挤压子元素，形成边框的效果。

还有一种方式也是颇为巧妙，代码如下；

<div style="width:100px;height:50px;line-height:50px;text-align:center;background:tan;border-radius:10px;box-shadow:0 0 0 10px #655;outline:10px solid #655;">
		圆角边框
</div>

这种方式主要通过outline描一个10px的边框，由于outline是根据border走的，会留下四个空隙，在使用box-shadow阴影来填补空隙，box-shadow是根据内容走的，正好可以形成边框的效果。

这两种画边框的方式，有一个共同点：都不增加盒子的大小，并不是真正的边框，根据盒模型的原理，增加border，是会改变盒子的大小的。而上述两种方式都是在元素本身的基础上来向外延申，并不会挤压其元素的空间，也就是两种都不会影响布局。

转载于:https://www.cnblogs.com/OnePieceKing/p/11214442.html