css模仿mac窗口 |dw css规则定义

.window {
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
}
.window >.title-bar {
background-color: #f0f0f0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
display: flex;
flex-direction: row;
height: 24px;
}
.window >.title-bar >.title {
font-size: 11px;
font-weight: bold;
padding: 3px 6px;
}
.window >.title-bar >.controls {
display: flex;
flex-direction: row;
}
.window >.title-bar >.controls >.control {
background-color: #ccc;
border-radius: 50%;
height: 10px;
margin-right: 4px;
width: 10px;
}

如上代码就是实现Mac窗口外观的CSS代码。大家使用了类名为“window”的元素作为窗口的容器。通过设置背景颜色、边框、圆角和阴影，大家使得窗口看起来更有层次感。

接下来，大家创建了一个名为“title-bar”的元素作为窗口标题栏。标题栏的背景色较浅，上部圆角设置成了与窗口相同的6像素圆角，确保整个窗口看起来是一个整体。标题栏与窗口的距离和高度通过样式表进行调整。

在标题栏中，大家添加了一个名为“title”的元素来显示窗口的标题。标题栏还包括了一个名为“controls”的元素，用于显示窗口的最小化、最大化和关闭按钮。这些按钮都是用圆形的元素实现的，颜色为深灰色。

通过使用CSS，大家可以快速轻松地模拟Mac窗口的外观和交互。当然，这只是模拟，在实际开发中还需要注意各种细节。希望以上内容对于想要在网页中模仿Mac窗口外观的开发者有所帮助。