css边框内圆角实现的2种方法

时间：5年前阅读：4746

边框内圆角

在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现下图的效果

1、思路如下：为元素设置圆角，外层设置轮廓outline。圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.uu{
	margin: 100px;
	width: 200px;
    height: 70px;
	border-radius:10px;
  	background: tan;
  	outline:10px solid #655;
  	box-shadow:0 0 0 5px #655;
			}
		</style>
	</head>
	<body>
		<div class="uu"></div>
	</body>
</html>

2、使用伪元素实现边框内圆角

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	.uu{
		margin: 100px;
	position: relative;
	height: 200px;
    width: 400px;
    text-align: center;
     line-height: 200px;
     background: #FFF;
     border-radius: 30px;
	}
	.uu::before {
		 content: '';
     position: absolute;
     top: -15px; right: -15px; bottom: -15px; left: -15px;
     background: #B387DD;
     z-index: -1;
	}
		</style>
	</head>
	<body>
		<div class="uu"></div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css边框内圆角实现的2种方法

网友评论