CSS3实现内凹圆角的实例代码，【干货】
warning:
这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。
在CSS3中，可以使用border-radius属性来创建内凹的圆角。通过指定较大的内部半径和较小的外部半径，可以实现内凹的效果。
以下是一个简单的例子，展示了如何使用CSS3来创建内凹的圆角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内凹圆角示例</title>
<style>
.inset-rounded-corners {
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 50%; /* 创建完全的圆形 */
position: relative;
}
.inset-rounded-corners::before {
content: '';
position: absolute;
top: 20px; /* 根据需要调整 */
left: 20px; /* 根据需要调整 */
right: 20px; /* 根据需要调整 */
bottom: 20px; /* 根据需要调整 */
background-color: #fff;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="inset-rounded-corners"></div>
</body>
</html>在这个例子中，.inset-rounded-corners 类创建了一个带有背景色的方形，并使用border-radius: 50%;创建了完全圆角。然后，使用:before伪元素创建一个白色的圆形覆盖在方形的中心，从而形成内凹的效果。通过调整:before伪元素的top, left, right, bottom属性值，可以控制内凹的大小和深度。
评论已关闭