一个CSS属性，可以指定要显示的对象的特定区域。
您好，我正在使用光滑的滑块，我想对容器进行剪辑路径，但剪辑路径效果不佳。 这是我的 svg 路径 <
我有一个剪辑路径，可以切割某种形状。问题是它是用绝对坐标设置的。如果我把 % 放在那里，它就会崩溃。如何缩放它以使其适合画布边框并伸展...
我使用剪辑路径（id：contour1-contourMask）在Plotly创建的轮廓SVG上定义德黑兰市的边界。这里是代码：https://codepen.io/mojtaba_codepen/pen/abeKJRX 虽然它...
我在这个问题上很挣扎。我找到了一篇文章：https://css-tricks.com/lets-create-an-image-pop-out-effect-with-svg-clip-path/，我已经尝试了这些步骤。问题是我...
你能帮我用css中的clip-path制作一个具有这张图片中形状的div吗？ 我想使用 Clip-path 而不是 mask，因为我必须将它应用到 div。 先感谢您 该...
我想使用 HTML、CSS 和 Tailwind CSS 设计一个右侧顶部和底部边缘带有凹圆角的侧边栏？
我正在设计一个侧边栏，其中活动项目的右上角和右下角应有凹曲线。我使用 Tailwind CSS 进行样式设置，我最初尝试设置 borderTopRight...
如何使用 css 剪辑路径为容器的顶部和底部创建匹配的波浪边框？
我正在尝试创建一个顶部和底部都有波浪形、不完美边框的容器。我的目标是使顶部边框与底部边框的图案完全匹配。 我试图实现...
我有一个网站，需要一些具有不错的悬停效果的标题（在本例中进行了精简，但这就是我使用 svgs 做所有事情的原因） 我希望悬停时的文本缩小为
如何在 CSS 和 HTML 中创建具有倒 S 曲线样式的圆角矩形？
我正在尝试创建一个类似于下面所附图像1的设计，其中圆角矩形在底部具有“S曲线”效果。我当前的策略涉及父元素（hero_r...
我在水平菜单中的项目之间看到了抗锯齿垂直线，据我所知，这些垂直线不应该存在。 我正在尝试在所有不存在的项目下方创建无缝阴影...
我正在尝试将 css Clip-path 属性与路径一起使用。但我无法构造一个以相对方式定义的路径，类似于剪辑路径：polygon(50% 0, 100% 50%, 50% 100%, ...
我想在我的网页上添加画笔描边效果动画。我尝试使用转换，但没有成功。我希望画笔描边具有从左到右的擦除动画，以便它显示自己......
我正在尝试制作一个具有自定义形状的div。这就是我想做的： 分区 但无法达到我想要的。 我尝试过的： 1） .路牌{ 背景颜色：#e9f7ea； 边框：1px实线#
我想创建一个顶部弯曲的div。我想为此使用剪辑路径。 我已经在 Inkscape 中创建了路径，但我不明白我需要如何缩放/更改路径，以便它可以缩放/拉伸...
我正在尝试使用 shape-outside 和 Clip-path 在 div 中添加自定义文本布局。它确实按预期工作，除了一件事 - 父级高度不固定，所以 .my-div:before 应该自动...
我想制作一个 gdpr 同意浮动广告，在页面加载和悬停时展开一次。我发现 CSS 剪辑路径可能是一个很好的解决方案。 在默认状态下，我只想显示带有
有没有办法在CSS中使用clip-path创建这个图片库网格？
我正在尝试创建一个布局，其中左侧有一个大图像，右侧有四个较小的图像排列在网格中。整个容器应该有倾斜的边缘，如图
JavaScript 的剪辑路径动画不适用于 classList，只能更改样式属性
我使用 CSS 和 JavaScript 制作了这个动画。当我将鼠标悬停在 div 上时，背景颜色会随着圆形动画而变化。 这段代码正在运行： 我使用 CSS 和 JavaScript 制作了这个动画。当我将鼠标悬停在 div 上时，背景颜色会随着圆形动画而变化。 此代码正在运行： <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.style.clipPath = "circle(150% at 0% 50%)"; }); d1.addEventListener("mouseleave", function() { d2.style.clipPath = "circle(0% at 0% 50%)"; }); </script> </body> </html> 我真的不明白为什么这个版本不起作用。它应该是相同的，但它不起作用。添加了“动画”类，但没有任何反应。 <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } .animate { clip-path: circle(150% at 0% 50%) } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.classList.add("animate"); }); d1.addEventListener("mouseleave", function() { d2.classList.remove("animate"); }); </script> </body> </html> 谁能解释一下为什么它不起作用？谢谢。 Id 选择器优先于类：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 更换 .animate { clip-path: circle(150% at 0% 50%) } 与： #d2.animate { clip-path: circle(150% at 0% 50%) } <!DOCTYPE html> <html lang="it"> <head> <style> #d1 { width: 300px; height: 300px; background-color: lightblue; position: relative; } #d2 { width: 100%; height: 100%; background-color: orange; clip-path: circle(0% at 0% 50%); transition: clip-path 0.7s ease-in-out; } #d2.animate { clip-path: circle(150% at 0% 50%) } </style> </head> <body> <h2>The clip-path property</h2> <div id="d1"> <div id="d2"></div> </div> <script> let d1 = document.getElementById("d1"); let d2 = document.getElementById("d2"); d1.addEventListener("mouseenter", function() { d2.classList.add("animate"); }); d1.addEventListener("mouseleave", function() { d2.classList.remove("animate"); }); </script> </body> </html>
我正在尝试使用 SVG 过滤器在图像上创建圆形剪切路径，如本博客文章中所述：“如何在使用 css 剪切路径多边形时制作圆角”。 对于这个重新...
我的代码是这样的： 标签栏( 控制器：_tabController， 可滚动：假， 分隔线颜色：Colors.transparent， ...