CSS3实现内凹圆角的实例代码,【干货】
在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
属性值,可以控制内凹的大小和深度。
评论已关闭