面试题：CSS边框样式复杂设计问题

Question

在一个响应式网页布局中，有一个卡片元素。当屏幕宽度大于等于768px时，卡片边框宽度为5px，边框样式为double，边框颜色为蓝色，四个角的圆角半径根据不同方向分别设置：左上角10px，右上角20px，右下角30px，左下角40px；当屏幕宽度小于768px时，边框宽度变为3px，边框样式为dotted，边框颜色为灰色，四个角统一为5px圆角。请用CSS实现上述需求，并解释如何通过媒体查询来控制边框属性的变化。

Answer 1

.card {
  /* 默认样式，会被媒体查询覆盖 */
  border-width: 3px;
  border-style: dotted;
  border-color: gray;
  border-radius: 5px;
}

@media (min-width: 768px) {
 .card {
    border-width: 5px;
    border-style: double;
    border-color: blue;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
  }
}

媒体查询 @media (min-width: 768px) 表示当屏幕宽度大于等于768px时，应用大尺寸屏幕的样式。在这个媒体查询块内，卡片的边框宽度、样式、颜色以及圆角半径都被重新设置。当屏幕宽度小于768px时，会应用默认的样式，也就是 card 类本身定义的样式，实现了根据屏幕宽度变化来控制边框属性的效果。