这篇文章主要介绍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实现放大缩小关闭按钮的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/css/711039.html
