border 相关问题

我有一个简单的反应应用程序（Vite项目）应用程序.tsx 导入“./common-styles.css”；导出默认函数 App() { 返回（我有一个简单的反应应用程序（Vite项目） app.tsx import "./common-styles.css"; export default function App() { return ( <div className="app"> <div className="interactive"> content content </div> </div> ) } 只有 1 个 css 文件常见样式.css @property --interactive-color { syntax: "<color>"; inherits: true; initial-value: green; } @property --interactive-text-color { syntax: "<color>"; inherits: true; initial-value: white; } @property --interactive-border-top-style { syntax: "<string>"; inherits: true; initial-value: dotted; } @property --interactive-border-top-width { syntax: "<length>"; inherits: true; initial-value: 5px; } @property --interactive-border-top-color { syntax: "<color>"; inherits: true; initial-value: red; } .interactive { background-color: var(--interactive-color); color: var(--interactive-text-color); border-top-style: var(--interactive-border-top-style); border-top-width: var(--interactive-border-top-width); border-top-color: var(--interactive-border-top-color); padding-top: var(--interactive-padding-top, 1vw); padding-bottom: var(--interactive-padding-bottom, 1vw); padding-right: var(--interactive-padding-right, 3vw); padding-left: var(--interactive-padding-left, 3vw); border-top-right-radius: var(--interactive-border-top-right-radius, 5px); border-top-left-radius: var(--interactive-border-top-left-radius, 5px); border-bottom-right-radius: var(--interactive-border-bottom-right-radius, 5px); border-bottom-left-radius: var(--interactive-border-bottom-left-radius, 5px); } （移除底部、右侧和左侧道具以缩短问题，但它们的行为相同）由于我没有覆盖任何属性，因此我希望组件具有所有属性的指定初始值。确实如此，但边框样式除外，其行为就像具有未指定的值一样。我知道通过手动指定样式可以正确设置边框宽度和颜色 border-top-style: solid; 颜色道具也设置正确。这只是自定义道具中不起作用的样式。我已经尝试过： syntax: "<String>"; syntax: "<string>"; initial-value: "dotted"; initial-value: dotted; syntax: "'none' | 'solid' | 'dotted' | 'dashed'"; 在 prop 引用上指定后备值： border-top-style: var(--interactive-border-top-style, dashed); 使其采用后备值。您必须像下面一样定义值，而不使用引号。 @property --border-top-style { syntax: "dotted|dashed|solid"; inherits: true; initial-value: solid; } @property --border-top-width { syntax: "<length>"; inherits: true; initial-value: 5px; } @property --border-top-color { syntax: "<color>"; inherits: true; initial-value: red; } body { border: var(--border-top-width) var(--border-top-style) var(--border-top-color); } some content

css reactjs vite border css-variables

回答 1 投票 0

为什么我的边框在缩放时或在 iPad Air 等设备上会出现额外边框？

我遇到一个问题，当我放大页面或在不同的屏幕格式（如 iPad Air）上查看页面时，我的边框似乎有额外的边框或一种双边框效果。这里...

css reactjs image tailwind-css border

回答 1 投票 0

如何为使用 object-fit:scale-down 调整大小的图像创建边框

我有一个 JavaScript 幻灯片，可以在浏览器窗口中显示各种尺寸的图像。它使用 object-fit:scale-down 来调整图像大小以适合容器。我想给

javascript html css border object-fit

回答 1 投票 0

Flutter 卡/容器/边框问题

我想创建一张以下形状的卡片：我目前面临的问题是这种情况：如果仔细观察，您会发现容器没有像边框那样呈圆形。发表评论后...