2016-08-08

边框内圆角

昨天看了书，，然后忘了写了，，，来来来，，今天补上
有时我们要实现这样的一种效果，只有内侧是圆角，而边框或描边的四个角在外部仍是直角,如下：
;
此时我们可能会这样写这个效果：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>边框内圆角</title>
<style type="text/css" media="screen">
	.outer{
		background: #655;
		padding:.8em;
		width:20em;
		margin:0 auto;
	}

	.inner{
		background:tan;
		border-radius:0.8em;
		padding:1em;
	}
</style>
</head>
<body>
	<div class="outer">
		<div class="inner">
			图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变
		</div>
	</div>
</body>
</html>

上面的这种方法使用了两个div,如果我们要外面的边框颜色不是纯色，而是由条纹的一些图案，这种方法会比较灵活，但是如果单单是纯色，我们其实可以只使用一个div+一些css skill;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>边框内圆角</title>
<style type="text/css" media="screen">
	.skill{
		width:20em;
		margin:30px auto;
		background:tan;
		border-radius:.8em;
		padding:1em;
		box-shadow:0 0 0 .6em #655;
		outline:.6em solid #655;
	}
</style>
</head>
<body>
	<div class="skill">
		图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变
	</div>
</body>
</html>

正如你所看到的，，同样实现了上述效果
我们得益于两个事实：

描边不会跟着元素的圆角走，所以显示出直角
而box-shadow却会
所以我们把两个叠加，box-shadow刚好填补描边与容器圆角之间的空隙，从而达到效果
我把box-shadow的颜色修改下，大家就容易看清了：

;

此外到底要多大的投影扩张值才能填补空隙呢？
这里需要用到我们的勾股定理，经计算，为了让这个效果得以实现，扩张半径必须要比描边的宽度小，但又要比(根号二-1)r大，这里的r是border-radius的大小

本文标题:边框内圆角

文章作者:弦冰

发布时间:2016年08月08日 - 21时32分

最后更新:2016年08月11日 - 21时50分

原始链接:http://baidu.com/2016/08/08/边框内圆角/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。