<div className="size-50px bg-green bg-red bg-blue"></div> 就是想组件的传入 className 灵活些，可以直接注入
className={ clsx( 'px-12px flex-center border-0 select-none focus:outline-none relative', 'bg-gradient-to-r from-[#006DE9] to-[#0077FF] ', 'disabled:bg-blue-300 disabled:cursor-not-allowed', 'flex-center', rounded ? 'rounded-100000px' : '', isPressed ? 'bg-blue-800' : '', fullWidth ? 'w-full' : 'w-auto', loading ? 'opacity-50' : 'opacity-1000', sizeCss[size], className, ) } 有这些相关的配置吗，找了一圈了
]]><!-- 默认卡片 --> <div class="card"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 警告卡片样式 --> <div class="card card--warning"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 成功卡片样式 --> <div class="card card--successful"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> 关于 SCSS 我的想法是：
// 这里定义了普通卡片样的样式 .card { &__title { color: gray; } &__content { color: lightgray; } // 定义警告卡片的样式 &--warning { &__title { color: yellow; } &__content { color: lightyello; } } // 定义成功卡片的样式 &--successful { &__title { color: green; } &__content { color: lightgreen; } } } 但是警告卡片和成功卡片的 css 会被解析为：
.card--warning__title {} .card--warning__content {} .card--successful__title {} .card--successful__content {} 也就是我实际使用的时候如果要使用警告卡片，实际上 html 应该写成：
<div class="card card--warning"> <div class="card--warning__title"><!-- 而不是 <div class="card__title"> --> <slot name="title"/> </div> <div class="card-warning__content"><!-- 而不是 <div class="card__content"> --> <slot name="content"/> </div> </div> 请问各位老哥，SCSS 应该怎么来定义样式啊？
]]>最近无论做了个小网站，后来发现自己 css 都忘光了，问题在这里：
spajishi.com 上面搜索框不齐，调整齐了，内页的搜索框又不齐了，好像是需要加一个新的类区分开才行，是这样吗？ 真忘了，现在不搞技术了。
]]>electron-vite / vue3
前端项目 A 通过 iframe 加载项目 B ，但是前端项目 B 要允许内嵌在 electron 中，所以在 title 组件上配置了 -webkit-app-region: drag; 属性，允许用户直接通过标题栏进行窗口拖拽。然后就发现 A 项目中的 iframe 无法加载 B 项目，经过反复测试，发现把 -webkit-app-region: drag; 属性注释就可以正常的加载。
无法加载的表现形式为，灰色，如图： 
目前我的解决方案 B 项目中的拖拽使用通过 ipcRenderer.send 方法来实现，不再使用 -webkit-app-region: drag; 属性。
想知道 -webkit-app-region: drag; 为什么会导致 iframe 加载页面失败的原因，以及有无其他更好的解决方案？
]]>两个现象：
1 、当 div 和 span 的 font-size 设置为相同值时，div 的高度会为 0 （这又是为什么呢？）
2 、如果去掉，那么 div 的高度为 0. 这可能是因为页面上没有<!DOCTYPE html>，浏览器将会以怪异模式的方式去渲染。
代码地址： https://jsbin.com/ziyimaleqe/edit?html,output
想要实现这样的效果：
又边看 Tailwind CSS 的文档边写点东西
但是 css 是来回调试，经常不生效，或者位置奇奇怪怪
css 有什么固定套路可以用吗？
你们怎么度过的这个阶段？
研究了下几种布局方式都不支持,只能通过 js 计算的方式设置每个元素位置来实现 但是 js 的问题时被布局元素尺寸变化时要重算,不能自动重新调整,布局调整完成前就会有段站时间内容伸出容器
]]>我想用媒体查询,针对屏幕宽度小于 1280px 的情况,缩小一下字体,我把 css 写成了下面的两种格式,但是都不管用.
@media screen and (max-width: 1280px) { .textanniu { font-size: 30px; } }
@media (max-width: 1280px) { .textanniu { font-size: 30px; } } 请教诸位老大这是咋回事? 我的 meta 是这样的:
]]>
<script setup lang="ts"> import { onMounted } from 'vue' import Konva from 'konva'; const kOnvaInit= () => { const stage = new Konva.Stage({ container: 'target', width: 400, height: 400 }) var layer = new Konva.Layer(); var simpleText = new Konva.Text({ x: 0, y: stage.width() / 2, text: 'Simple Text', fontSize: 50, fontFamily: 'Calibri', fill: 'green', stroke: 'white', strokeWidth: 10, lineJoin: 'round', fillAfterStrokeEnabled: true }); layer.add(simpleText); stage.add(layer); } onMounted(konvaInit) </script> <template> <div class="test"> test text </div> <div class="test2"> test text </div> <div id="target" class="text3"></div> </template> <style scoped> .test { font-size: 80px; color: black; text-shadow: -10px -10px 10px blue, 10px -10px 10px blue, -10px 10px 10px blue, 10px 10px 10px blue; } .test2 { font-size: 80px; color: black; -webkit-text-stroke: 10px blue; } .text3 { width: 400px; height: 400px; background-color: black; } </style> 贴吧看到的，下边是我的回复：
实际表现上像是第 n + 1 行比第 n 行有更高的 z-index 值，然而不改定位时单独指定 z-index 又是无效的，，AI 也没给出对题的解释。。
p 中有一个 span ，为 span 设置 padding 和 背景色，span 显示在第二行，为什么第一行会被 span 遮挡而第三行不会？
]]>
大家好，如图这样的下圆弧效果是怎么做出来的呢？ CSS 还是图片呢？ ]]>运行地址： https://jsbin.com/mipexucegi/edit?html,css,output 
网站 https://wfion.com 我开始排查问题得时候，只排查了 body 得 css 。请教前端同事了，他只知道我图中元素影响了 超出了 body 但是他不知道什么原因
]]>
链接 2 链接 3 其中 img class="pro_free 是固定的，我的需求是筛选出链接 1 也就是筛选出 embedded 节点下面的，img 元素上面的第一个 a 元素
据我查资料，css 选择器不支持这种筛选，如果用 python ，请问应该怎么写呢
]]><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .square { width: 100px; height: 100px; background-color: blue; color: white; /* 如果去掉这个 flex before 就看不见了 */ display: flex; } .square::before { content: ""; width: 50px; height: 50px; background: lightgreen; } .square::after { content: ""; } .text::before{ content: "t1"; color: red; } .text::after{ content: "t2"; color: red; } </style> </head> <body> <div class="square"></div> <p class="text">love</p> </body> </html> .fa-camera-retro:before { content: "\f083"; } <p> <i class="fa fa-camera-retro"></i> <span>fa-camera-retro</span> </p> 为什么不设计成下面这么用：
<p> <i>\f083</i> <span>fa-camera-retro</span> </p> const style=document.createElement('style');style.innerText='*{filter:grayscale(1)!important}';document.getElementsByTagName('head')[0].appendChild(style) 然后回车
grayscale(1) 全灰
grayscale(0) 全彩
现在 MacOS 的 Light, Dark 这样的主题，也是需要写两套吗？
]]>例如小米网站的 misans： https://font.sec.miui.com/font/css?family=MiSans:300,450,500,650,800:Chinese_Simplify,Latin&display=swap
]]>
.line-jumen{ left: 8.8rem; top: 3.23rem; width: 1.82485rem; //这里宽度显示正常 opacity: 0; transform: rotate(202deg); animation: linejumen 20s linear; @keyframes linejumen { 0%{ opacity: 0; width: 0; } 59%{ opacity: 1; width: 0; } 60%{ opacity: 1; width: 1.82485rem;//这里显示会比上面的宽度窄许多 } 100%{} } } 同样的长度单位，为什么会这样？
]]>如何解决这个问题？
示例代码： 这个例子里，如果实时改变--color1 ，背景会一直闪白 https://jsfiddle.net/5ct9z6wL/
<div id='background_img'> </div> <span id="another_var">asdfadfs</span> <style> #background_img{ background: var(--background_img_url); width: 661px; height: 431px; } #another_var{ color:var(--color1); } :root{ --background_img_url:url('https://i.imgur.com/GHiyiSx.jpeg'); --color1:red; } </style>