我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单，是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单，是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点！ 我们使用csstransform将面板移动到底部！ .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战
我有一个 HTML ，带有边框半径和使用位置的粘性标题：sticky，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用 滚动时 我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角： 有没有办法可以在使用粘性标题向下滚动时保持圆角，或者在标题变得粘性并从原始位置向下移动时删除粘性标题？理想情况下，我想要一个CSS解决方案。 您可以使用伪元素隐藏边框的某些部分： table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样，似乎使用伪元素来覆盖标题下方不需要的边框是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码： /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框： tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量！ 使用许多伪选择器看起来样式相当丑陋，但似乎可以解决您的问题。 有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。 在此示例中，在右侧，您可以看到表格行由于边框半径而可见。在左边，我应用了盒子阴影。 盒子阴影：0 -2.1rem 0 .6rem #E5E7EB； 在这里，它是灰色的，以便您可以看到它的工作原理，但您只需使用与背景相同的颜色即可使其完全不可见。 这是最终结果以及我正在使用的代码： th:第一个孩子 { 边界半径：0.75rem 0 0 0； 左边框：.1rem 实心 $color-gray-200； 框阴影：0 -2.1rem 0 .6rem $color-gray-200； } th：最后一个孩子{ 边界半径：0 0.75rem 0 0； 右边框：.1rem 实心 $color-gray-200； 盒子阴影：1rem -2.1rem 0 .6rem $颜色白色； } 可能需要调整框阴影以隐藏基于所选边框半径的行。 不确定你是否熟悉jquery，如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径，但这对于新手来说有点棘手jquery/JS。 其次，您可以将粘性标题封闭到父级（例如class="parent")），并将父级背景设置为白色，没有边框。并保持粘性标题的边框半径不变。因此，当您滚动内容时将位于该父级下方（例如 class="parent"）。为了确保父级出现在该行上方，您可以给出 z-index: 10
警告：在 calc() 之外使用 / 进行除法已被弃用，并将在 Dart Sass 2.0.0 中删除
在我更新了 Angular 应用程序并更新了 Sass 编译器后，我开始收到此错误 $val: 100px; .some-选择器{ 填充：$val/2； } 警告：使用 / 来除...
Next.js 14 个 tailwind css 类不起作用
我在新项目中将 Tailwind CSS 与 Next.js 14 一起使用，但是当我在 page.tsx 文件中使用 Tailwind CSS 类时，它不起作用。我尝试更改 tailwind.config.ts 和 tailwind.config.js acco...
CSS 盒子模型的元素是什么？ 给我与问题相关的答案... 区分 CSS3 和 CSS2。 CSS3和CSS2的主要区别在于CSS划分了不同的se...
/* 自定义 CSS =================================================== */ body::-webkit-滚动条 { 宽度：10px； } body::-webkit-scrollbar-track { 框阴影：插入 0 0 6px rgba(0, 0, 0, 0.3); }
我正在尝试构建一个 CSS 网格 我不想在 item2 和 item3 之间有空间，并且希望这些项目在容器顶部对齐。 是否可以仅使用 CSS 而不修改...
在JS文件中我有： {html: '测试代码 HTML', css: '测试代码 CSS'} 我如何解析它以获得 html 和 css 的值？ 这是我尝试过的： const json = JSON.parse(数据); 反对...
使用 :host ::ng-deep 设置 CSS 角色到角度组件 CSS 不起作用？
尝试使用以下方法设置角度组件的 CSS prop :host ::ng-deep .p-dropdown-panel { 变换原点：中心底部！重要； 顶部：-119px！重要； 左：0！重要； } ...
Vite 如何处理删除内置 .css 文件中的 .css 嵌套？
我一直在使用 Vite，并注意到由于删除了嵌套，构建的 .css 文件与原始源有所不同。具体来说，Vite 似乎压平或删除了
我的问题： 大家好。我只是有一个关于使用 JavaScript 更改 CSS 属性的问题。我想使用我在 JavaScript 中编写的方程式来更改 CSS 属性的值。 我的目标是...
我的 GitHub 页面网站上有一个个人资料图片，它使用一些 CSS 使其看起来很酷。图像在 chrome 或 Firefox 中显示完美，但在 safari 中似乎忽略了图像的所有 css...
我正在尝试使用CSS实现一个自定义样式按钮，如下图所示。 我在我的 css 文件中尝试了这个，并且能够实现更接近所需设计的效果： .casinoButton {
曾几何时.. 一个美丽的公主.. 我如何选择（在我的CSS中）这里面第一段的第一个字母...
为什么每次按下 Ctrl + F5 时 Angular 都会调用 SCSS 文件？
我在使用 Angular 时遇到问题，当我按 Ctrl + F5 时，CSS 文件会重新加载，这会破坏我的布局，直到 CSS 文件加载完成。 F5没有问题，因为CSS文件是缓存的...
如何制作带有 90 度线的 CSS 背景渐变。应该从无线开始，然后是一条实线，接下来的 3 条虚线。
CSS 伪类组合 :first-child 和 :first-letter
我一直在研究 CSS 伪类，并尝试了一些可用的类来看看什么可以做，什么不能做。 我的问题是： 我想使用 :first-child se...
我正在尝试设置一个简单的示例，使用引导CSS的网格功能，并有一个index.html文件，该文件的容器有两行，每行有两列。但不是col...
我希望电影标题和电影年份以我在 CSS 文件中设置的样式显示。目前，JavaScript 创建的元素仅显示纯黑色文本。 t 的样式...
带有 --css bootstrap 的 Rails 7 新应用程序 - Turbo 按钮不起作用
使用 Rails new myapp --css bootstrap 创建新应用程序 Rails 7 时，我的涡轮按钮将不起作用： =button_to“退出”，edit_post_path，方法：：删除，形式：{数据：{turbo_confirm：“...
假设我有以下目录结构： 文件.txt 文件.css 文件.js 目录/文件.txt 目录/文件.css 目录/file.js 目录/子目录/文件.txt 目录/子目录/文件....
给定一个以小框、单行开始的文本区域，当用户键入多行内容时，是否可以使用 CSS 自动增长为多行，直到设定限制（300 像素）...
我正在使用 formkit 和 vue3。我还为 formkit 导入了 genesis 主题。 但我想用 css 将提交按钮从默认的蓝色设置为另一种颜色。但不知道如何...
Next.js 项目中自定义类的 Tailwind CSS 编译错误
我正在使用 Tailwind CSS 开发 Next.js 项目，但遇到了似乎无法解决的编译错误。该错误与我在 theme.css 中定义的自定义实用程序类有关...
我一直在论坛上寻找解决这个问题的方法，我能找到的最接近的就是这个。但似乎没有解决办法。 我有一个 CSS 网格，它是 grid-template-columns: Repeat(auto-fill,...
我无法在 CSS 中获得两个按钮的正确定位。 下图详细说明了我想要的结果，但我需要有关相对于上面文本区域的定位的帮助。 想要的 r...
我想在 CSS 中布局一些元素，这些元素在三列或四列中垂直“流动”，如下所示： 布局应该将元素像 pos 一样均匀地放置在列中...
我需要这方面的帮助。我不太擅长 CSS/布局或 UI 设计。我只是想知道怎么做这个无法弄清楚，为什么它会在这些表上做这些事情： 在红框里，我的
我正在尝试使用 html 和 css 动画关键帧创建这个漂亮的动画，但我被卡住了。我尝试过改变旋转和变换，但我无法让它像图像一样
图像的右侧是问题所在，我无法将边框做成像这样的波浪。 我希望它弯曲但不对称。 这是我使用的最接近的（https://css-generators.com/wavy-shape...
CSS：如果我在CSS中设置高度，当我设置高度时用鼠标拖动时，面板在调整大小时会出现问题，因此它会冻结
我有 3 个面板（左、中、右），当我用鼠标拖动它们时，它们会调整大小。在右侧面板中，我有一个 iframe，其 css 为 width: 100%。为了让它更清晰，我把它涂成红色。 我愿意
我有一个模块联合远程存储库，它是： 使用 React 17 构建 Material-ui 4 包括 jss 有来自第三方库的自己的全局 CSS，我无法编辑 我有多个主机...
我在CSS中有一个遮罩图像，我可以使用遮罩位置属性轻松定位它，但我不知道如何旋转它。如何在不旋转整个元素的情况下旋转蒙版图像？ ...
我正在使用 Flowbite 的手风琴组件。我无法弄清楚是什么导致手风琴在页面加载时进入黑暗模式。我确实检查了元素并看到了它的一些暗模式 CSS ...
我有一些css和js文件，我尝试使用vite导入到React中的视图中，以便它加载样式，但它没有加载，当我进入视图时，我必须注释和取消注释小鬼...
我有一个关于如何使用 css 类选择器更新同一行中的列的问题。下面是示例场景。 物品 价格 折扣 最终价格 移动的 500 10 450 笔记本电脑 ...
TypeScript 仅抱怨在 VSCode 中关闭 .d.ts 文件时未找到 css 模块的模块
我有一个与这个问题非常相似的问题，在尝试导入CSS模块时抛出“找不到模块”错误。但是，该问题的建议答案是创建一个
使用打字稿创建react-app css模块：无法解析.module.css
我正在尝试将CSS模块与打字稿和create-react-app反应应用程序一起使用。 我确实导入了'./App.modules.css';在我的 App.tsx 中，但出现错误： 找不到模块：无法解析'./App.modules.cs...
我正在使用 React 和 NextJS，我注意到在使用模块化 scss 文件时，它会使用文件名自动为我的类名添加前缀？ 有办法禁用这个吗？因为它使 DOM 变得相当
在代码中我有复选框，选中时会显示下拉列表。 如果选择下拉列表的第一个值，则下一个下拉列表将显示在其旁边。 问题是我无法增加宽度...
请帮忙，我的django无法将我的css链接到我的html模板。我已经实现了几乎所有我能找到的解决方案，添加了一些推荐的url模式，尝试了完整路径而不是相对路径，确保...
如何设置简单的 css `:hover {` 颜色更改在 `background:url()` 中使用的 `svg`
我正在尝试设置一个简单的 css :hover { 在背景中使用的 svg 上更改颜色：url() 我正在尝试使用中风=“currentColor”，但这不起作用。 唯一可能的方法似乎...
如何使用 CSS conic-gradient 绘制重复的*水平*虚线？
我刚刚阅读了如何使用 css 渐变绘制垂直虚线和实线 但我不得不说，尽管一遍又一遍地阅读 MDN 文档，并阅读建议的代码，我还是没有任何了解...
为什么 justify-content 将东西放在底部？我的 CSS 做错了什么吗？
我不太擅长html、css、twcss。我需要帮助。 每当我使用 justify-contents:space- Between; 时它使一些东西下降。 我的问题的图片 证明行为怪异还是我的技能问题？ 接下来...
我正在尝试使用 Jekyll 将行号添加到 Markdown 中的围栏代码块中。此外，我正在尝试寻找更新代码 CSS 样式的方法。 关于第一个问题，我正在尝试遵循
我很愚蠢，当我的浏览器选项卡处于 67% 缩放时，不小心编码了我网站的 html 和 css。在 100% 缩放时，一切看起来都太大了，div 间距也变得很奇怪。这是什么...
对于小开发团队的 HTML、CSS、Javascript 开发，您更喜欢哪种版本控制系统？
哪种版本控制系统适合 4 名开发人员的 HTML、CSS、Javascript 开发？ 我们是 4 名开发人员，都在不同的国家，并且都有不同的操作系统。 2
这是我第一次使用Ant-design这个非常好的工具。 就像一个优秀的前端开发人员一样，我需要遵循我的 Figma 板并修改组件。 我正在使用 CSS ！重要规则来覆盖 ant-des...
我只是一个尝试编程的初学者，我目前正在学习 HTML 和 CSS，我终于开始从事我的第一个正式项目了。我只是想为本地游戏做一个简单的主页...
当我构建页面时，我想要为每个页面使用单独的样式表还是为整个网站使用一个大的样式表？出于加载目的，单个文件不是更好的做法吗...