css3 metro风格

CSS3 Metro风格是一种流行的设计风格, 该风格以掀起平铺的方格, 大胆使用鲜艳的颜色和清晰的直线, 呈现现代简约的感觉. 它的设计灵感来自于微软的Modern UI (以前的Metro UI)在 Windows 8 操作系统中的应用. 使用CSS3可以非常容易地实现Metro风格.

下面是一个Metro风格的示例代码.

/*实现基本的metro风格*//*颜色定义*/$blue: #008cba;
    $green: #16a085;
    $orange: #f39c12;
    $red: #e74c3c;
    $yellow: #f1c40f;
    $gray: #9b9b9b;
/*共同属性定义*/.box{
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
}
/*风格1*/.blue{
      background-color: $blue;
      color: #fff;
      padding: 10px 15px;
}
/*风格2*/.green{
      background-color: $green;
      color: #fff;
      padding: 10px 15px;
}
/*风格3*/.orange{
      background-color: $orange;
      color: #fff;
      padding: 10px 15px;
}
/*风格4*/.red{
      background-color: $red;
      color: #fff;
      padding: 10px 15px;
}
/*风格5*/.yellow{
      background-color: $yellow;
      color: #fff;
      padding: 10px 15px;
}
/*风格6*/.gray{
      background-color: $gray;
      color: #fff;
      padding: 10px 15px;
}
    

以上代码定义了6种样式. 它们的样式都基本相同, 只是颜色不同. 并且每一个样式都有一个border-radius属性, 这种属性可以实现圆角效果, 使得元素更加美观. 在实际应用中, 可以根据自己的需求, 对这些样式进行改变.

总之, 使用CSS3实现Metro风格风格非常轻便, 且可以提高网站的视觉效果. 如果你想要创建一个现代简约的网站, 那么Metro风格一定是你的一个不错的选择.

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！