在vue页面中使用伪元素进行 气泡框|单选框自定义|滚动条自定义
1. 基于vue，使用到的图标是element plus
2. vue单页面代码
<template><h1>{{msg }}</h1><div className="error-message"><el-icon :size="20" :color="'blue'"><edit /></el-icon>系统异常，请稍后再试</div><!-- 气泡框 --><div className="container"><div className="box top-arrow">Top </div><div className="box right-arrow">Right</div><div className="box bottom-arrow">Bottom</div><div className="box left-arrow">Left</div></div><!-- 单选框自定义 --><div className="container"><div><input type="checkbox" id="backend" /><label htmlFor="backend">后端开发</label></div><div><input type="checkbox" id="backend" /><label htmlFor="backend">后端开发</label></div><div><input type="checkbox" id="frontend" /><label htmlFor="checkbox">前端开发</label></div><div><input type="checkbox" id="frontend" /><label htmlFor="checkbox">前端开发</label></div></div><!-- 浏览器中自定义滚动条 --><div class="container2"><div class="rect"><div class="box"></div></div><div class="rect2"><div class="box"></div></div></div></template><script setup>import {ref } from 'vue'import {Edit } from '@element-plus/icons'defineProps({msg: String})const count = ref(0)</script><style scoped lang="scss">.error-message {position: relative;color: #666666;padding: 12px 30px;background-color: #FFECE4;border-radius: 5px;}.error-message::before {content: '::before伪元素';}.container {display: grid;grid-template-columns: 200px 200px;grid-template-rows: 200px 200px;.box {width: 150px;height: 100px;background-color: red;color: white;position: relative;border-radius: 20px;display: flex;justify-content: center;align-items: center;font-size: 16px;}.box::after {content: '';width: 0;height: 0;position: absolute;}.box.bottom-arrow::after {border-left: 8px solid transparent;border-right: 8px solid transparent;border-bottom: 12px solid red;left: 22px;top: -10px;}.box.right-arrow::after {border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-right: 12px solid red;top: 22px;left: -10px;}.box.left-arrow::after {border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 12px solid red;top: 22px;right: -10px;}.box.top-arrow::after {border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 12px solid red;left: 22px;bottom: -10px;}}// 自定义复选框样式input[type="checkbox"] {margin: 0;}#frontend {opacity: 0;}#frontend+label {margin-left: -12px;pointer-events: none;}#frontend+label::before {content: '\a0';display: inline-block;vertical-align: 0.1em;width: 0.8em;height: 0.8em;border-radius: 0.2em;background-color: silver;text-indent: 0.15em;line-height: 0.65;cursor: pointer;}#frontend:checked+label::before {content: '\2713';background-color: yellowgreen;}.container2 {display: flex;justify-content: space-around;.rect,.rect2 {width: 200px;height: 200px;overflow: scroll;border: 1px solid gainsboro;}.rect2::-webkit-scrollbar {width: 10px;height: 0;background-color: transparent;}.rect2::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.08);border-left: 4px solid transparent;background-clip: padding-box;}.rect2::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, 0.08);border: 0;}.box {width: 100px;height: 300px;background-color: aliceblue;}}</style>
.04.26更新一个新的气泡框添加创建方式
child3是所在框的class名.child3::before {position: absolute;content: '';width: 0;height: 0;border: 10px solid;border-color: rgba(20, 102, 166, 0.85) transparent transparent transparent;//transparent放在不同位置改变箭头方向left:88px;top: 51px;}
