前端 CSS 经典：弧形边框选项卡
以下是创建一个弧形边框的选项卡的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弧形边框选项卡</title>
<style>
.card {
width: 300px;
height: 150px;
border-radius: 10px 10px 0 0;
background-color: #fff;
box-shadow: 0 6px 10px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
right: 0;
background-color: #4db8ff;
width: 100px;
height: 100px;
border-radius: 0 0 20px 0;
transform: translate(50%, -50%);
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="card">
<div class="content">
<h2>选项卡标题</h2>
<p>这是一个选项卡的内容。</p>
</div>
</div>
</body>
</html>这段代码创建了一个带有弧形边缘的选项卡，使用了CSS伪元素::before来实现弧形的背景。border-radius被用来创建圆角，并且使用transform属性将伪元素定位在卡片的左上角。
评论已关闭