CSS怎样实现浏览器的最小化还原

发布时间：2024-04-27 23:41:48 所属栏目：编程来源：DaWei

导读： 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>

以上就是CSS实现浏览器的最小化还原和关闭按键的介绍，上述示例具有一定的借鉴价值，有需要的朋友可以参考学习，希望对大家学习CSS有帮助。

（编辑：PHP编程网 - 襄阳站长网）

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