CSS怎样实现浏览器的最小化还原和关掉按键？

发布时间：2023-08-15 14:23:31 所属栏目：语言来源：

导读：CSS怎样实现浏览器的最小化还原和关闭按键？对于浏览器的最小化还原和关闭按键，大家应该很很熟悉的吧，也就是我们浏览器右上角的三个按键功能。今天我们就来了解看看，用CSS如何来实现这几个按钮，文中的示例代码介

CSS怎样实现浏览器的最小化还原和关闭按键？对于浏览器的最小化还原和关闭按键，大家应该很很熟悉的吧，也就是我们浏览器右上角的三个按键功能。今天我们就来了解看看，用CSS如何来实现这几个按钮，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

使用CSS 绘制上述三个按钮：

<template>

  <div class="windowAction">

    <button class="min">缩小</button>

    <button class="fullpage">放大</button>

    <button class="close">关闭</button>

  </div>

</template>

<script>

export default {

  data() {

    return {

      flag_fullpageWebView: 1

    };

  }

};

</script>

<style lang="scss" scoped>

.windowAction {

  margin-top: -5px;

  -webkit-app-region: no-drag;

  min-width: 70px;

  text-align: right;

  button {

    &:hover {

      color: #a8aabd;

    }

  }

  .min {

    width: 14px;

    height: 14px;

    background-color: transparent;

    font-size: 0;

    margin-right: 18px;

    position: relative;

    color: #878896;

    &:after {

      content: "";

      width: 100%;

      position: absolute;

      left: 0;

      bottom: 0;

      border-bottom: 2px solid;

    }

  }

  .fullpage {

    width: 16px;

    height: 16px;

    color: #878896;

    border: 2px solid;

    background-color: transparent;

    font-size: 0;

    margin-right: 18px;

  }

  .close {

    width: 18px;

    height: 18px;

    font-size: 0;

    background-color: transparent;

    position: relative;

    color: #878896;

    transform: rotate(45deg) translate(-2px, 2px);

    &:before,

    &:after {

      content: "";

      position: absolute;

    }

    &:before {

      width: 100%;

      left: 0;

      top: 50%;

      transform: translateY(-50%);

      border-top: 2px solid;

    }

    &:after {

      height: 100%;

      left: 50%;

      top: 0;

      transform: translateX(-50%);

      border-left: 2px solid;

    }

  }

}

</style>

（编辑：驾考网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!