在CSS中，绘制带圆角和内阴影的复杂边框可以通过结合使用border-radius、box-shadow和background-clip等属性来实现。以下是一个高效的解决方案：
border-radius 设置圆角首先，使用 border-radius 属性为元素设置圆角。
.element {
border-radius: 15px; /* 设置圆角半径 */
}
box-shadow 添加内阴影接下来，使用 box-shadow 属性来添加内阴影。box-shadow 的 inset 关键字可以创建内阴影效果。
.element {
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 添加内阴影 */
}
background-clip 控制背景裁剪为了确保内阴影不会溢出到边框之外，可以使用 background-clip 属性将背景裁剪到内边距框。
.element {
background-clip: padding-box; /* 背景裁剪到内边距框 */
}
将上述属性组合在一起，形成一个完整的样式。
.element {
border-radius: 15px; /* 设置圆角半径 */
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 添加内阴影 */
background-clip: padding-box; /* 背景裁剪到内边距框 */
border: 2px solid #ccc; /* 可选：添加边框 */
padding: 20px; /* 可选：添加内边距 */
}
以下是一个完整的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Border with Rounded Corners and Inner Shadow</title>
<style>
.element {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border-radius: 15px;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
border: 2px solid #ccc;
padding: 20px;
}
</style>
</head>
<body>
<div class="element">
This is a complex border with rounded corners and inner shadow.
</div>
</body>
</html>
border-radius: 15px;：设置元素的圆角半径为15像素。box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);：在元素内部添加一个黑色的半透明阴影，阴影大小为10像素。background-clip: padding-box;：确保背景颜色或图片不会溢出到边框之外。border: 2px solid #ccc;：可选，为元素添加一个2像素宽的灰色边框。padding: 20px;：可选，为元素添加20像素的内边距。通过这种方式，你可以高效地绘制出带圆角和内阴影的复杂边框效果。