变量使用运算符

drawerHeight:100

display: v-bind('showdesc ? "inline-block" : "none"');

实现各种形状

transform: 'perspective(40px) rotateX(10deg)',

transform:perspective(60px) rotateX(20deg); transform-origin:left;

第二种实现方式,推荐

//使用svg

Document .container { position: relative; display:flex; align-items: end; overflow: hidden; } .container div{ width:100px; height:30px; background-color: #f1eff0; } .container div:first-child{ background-color: #4989ed; height:40px; line-height: 40px; transform: perspective(60px) rotateX(20deg); transform-origin: left; border-top-right-radius:10px; margin-right:2px; } .container div:nth-child(2){ border-bottom-left-radius: 23px; } .container div:nth-child(1):after{ content:"" } .container div.zindex{ position: absolute; z-index: -1; background: #4989ed; width: 180px; height: 10px; } w3cschool上例子（.tab也要加z-index:0)

css使用变量以及颜色混合

1.const bgColor = computed(() => { return useSettingStoreHook().primaryColorValue + '14'; });给变量添加透明度 2.var(--primary-color, #3491FA)//后面是前面没有数据时的默认值

3.background: color-mix(in oklch, var(--primary-color), transparent 92%);（颜色混合兼容性不好 chrome firefox 要111以上）

     4.   background: linear-gradient(rgb(255 255 255 / 92%), rgb(255 255 255 / 92%)),
          linear-gradient(var(--primary-color), var(--primary-color));（颜色混合 兼容性好但是需要更换黑白模式的不行  因为是和白色混合的 黑色模式也会白）

栅栏布局

选择器

插槽选择器 :slotted(.m-tip) { margin: 16px 40px 24px; }