在 macOS 上的Chrome上会很好看。然而，在 Windows上，滚动条总是在那里(即使内容很短)。...这是因为无论内容如何，scroll-y都会显示滚动条，这时候我们可以使用overflow: auto，它只会在需要时显示滚动条。 ?...事例源码：https://codepen.io/shadeed/pe... 5. 长单词和链接 当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。...使用 position: sticky 还需要指定 top 值，不然它无法正常工作。 ?...向 SVG 添加 fill 有时，在使用 SVG 时，如果在 SVG 中以内联方式添加了fill属性，填充就不会像预期的那样工作。
作者：陈大鱼头 github： KRISACHAN 前言 上一节留了一个问题：“为什么 currentColor 是驼峰命名？”。...其实也有小伙伴答对了，原因就是因为 currentColor 是作为 SVG 的属性值存在，因此在 CSS 里就保留了这个驼峰写法，顺便提一个冷知识：“ currentcolor 这种全小写的方式也是允许的...自定义滚动条 ? 链接在此： https://codepen.io/krischan77/pen/VOPRbq 表单控件 ?...由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，...如果你有兴趣，请添加鱼头微信（krisChans95），添加时注明 “加群”，Mmmm，最后，如果觉得我的文章还不错，请加个关注跟点个“在看”呗！
前端开发者几乎每天都会和它们打交道，这里有20个CSS技巧，让我们一起来看看吧。 1. 解决 img 5px 间距的问题 你是否经常遇到图片底部多出5px间距的问题？...当有足够的内容时，按钮应该跟随内容。当你遇到类似的问题时，使用 flex 来实现智能的布局。 事例地址：https://codepen.io/qianlong/p... 6..../qianlong/p... 8. outline:none 删除输入状态线 当输入框被选中时，它默认会有一条蓝色的状态线，可以通过使用 outline: none 来移除它。...事件地址：https://codepen.io/qianlong/p... 9. 解决iOS滚动条被卡住的问题 在苹果手机上，经常发生元素在滚动时被卡住的情况。...图像适配窗口大小 事例地址：https://codepen.io/qianlong/p... 13. 隐藏滚动条 第一个滚动条是可见的，第二个滚动条是隐藏的。
我最近在 codePen 上看到了这个 加载程序，一个纯 CSS 制作的带有渐变反射的 3D 旋转竖条。...它的使用很简单，即使在不支持该属性的浏览器上，除了不显示反射以外，并没有什么其他影响。...这是因为，默认情况下，SVG 图形会有一个纯黑色的 fill ，完全不透明，但是，我们的 遮罩 默认是有透明度的。...总的来说，我们创建一个带有 viewBox 的 SVG 元素，以便把 0 0 点放在中间。我们定义一个竖条，它的底边在 x 轴上，左边在 y 轴上。...遗憾的是，我们不能在第二个 loader 元素上使用 mask ，因为它只在跨浏览器的 SVG 元素上有效。Edge 目前还不支持 HTML 元素的遮罩效果，但是你可以给官方提建议。
而另一个alt为空的图片，会折叠起来看起来像一个小点，这里因为它有边框。 但是，当alt属性有值，它看起来是这样的： ? 这不是一个很好的反馈吗?此外，当图像源失败时，可以向它们添加伪元素。...它的作用是可以让图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。 当宽度较大时，它将填充其父级（SVG）宽度而不会拉伸。 ?...> 非开发人员无法下载 必须先检查元素并复制图像的URL，然后才能下载嵌入SVG的图像。...这是一些入门问题： 为用户保留这个图像很重要吗，还是可以跳过它？ 我们是否需要在所有视口尺寸上使用它？ 它是静态的还是动态变化的？...我们的目标是使内部边框与图像融合在一起，这种不太实用。 使用 和 元素 现在的问题是，要添加内部边框，我们不能使用box-shadow，因为它无法在图像上使用。
但是，即使是精通CSS的人有时也需要对某些属性进行复习，尤其是如果他们有一段时间没有使用它们了。 如果你需要一些最新和最伟大的CSS的快速帮助，这里有CSS生成器来拯救。...SVG Optimizers https://petercollingridge.appspot.com/svg-optimiser 这是另一个很棒的免费在线SVG优化工具，可用于修剪SVG代码，它直观易用...跨浏览器测试 开发人员无法控制要从哪种设备访问其网站或应用程序。在2019年，超过一半的网络流量来自移动设备。从整体上看，屏幕尺寸从台式机、平板电脑到智能手机和可穿戴技术都有所不同。...GitHub 这个无需多言 CodePen https://codepen.io/ CodePen已经存在了很多年，并且受到前端开发人员社区的喜爱和广泛使用，它非常适合尝试概念，原型设计，学习编码和代码共享...由其团队定义如下： CodePen是一个社交化的开发环境。从本质上讲，它允许你在浏览器中编写代码，并在构建时查看其结果。
题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter + CSS)。...接下来，只需要搞懂不同的滤镜能产生什么样的效果，有什么不同的属性，就能大致对 SVG 滤镜有个基本的掌握！...有什么是 CSS 能力无法做到的么？下面来看看另外几个有意思的 SVG 滤镜。...image.png CodePen - feSpotLight SVG Light Source feMorphology 滤镜 feMorphology 为形态滤镜，它的输入源通常是图形的 alpha...Demo -- Rough Paper Texture with SVG Filters 你可以在 Sara Soueidan 的一次关于 SVG Filter 的分享上，找到制作它的教程：Youtube
它的值可以为 filter 函数 或使用 url 添加的svg滤镜。...它的数据类型由下列过滤器函数之一指定。每个函数需要一个参数，如果参数无效，则滤镜不会生效。...，但 box-shadow 也有一个缺点，就是在给透明图片添加阴影效果时，无法穿透元素，只能添加到透明图片元素的盒模型上。...或者很多网页中有鼠标 hover 悬浮到灰色元素上时变成彩色的样式效果。...有两个含有相同类名 glass 的 div 元素，它们分别被添加两个类 glass-by-filter 和 glass-by-backdrop-filter 来区分两种方法。
background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。...CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz） 这次，图片正常跟随滚动条滚动了，按常理，这种效果才符合我们大脑的思维...CodePen Demo（https://codepen.io/Chokcoco/pen/oMPrGZ） 结合这张 GIF，相信能对 background-attachment: fixed 有个更深刻的认识...: fixed 实现图片点击水纹效果 利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个，来源于这篇文章CSS Water Wave (水波效果)： ?...CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm） 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的
它的值可以为 filter 函数 或使用 url 添加的svg滤镜。...它的数据类型由下列过滤器函数之一指定。每个函数需要一个参数，如果参数无效，则滤镜不会生效。...box-shadow 也有一个缺点，就是在给透明图片添加阴影效果时，无法穿透元素，只能添加到透明图片元素的盒模型上。...或者很多网页中有鼠标 hover 悬浮到灰色元素上时变成彩色的样式效果。...有两个含有相同类名 glass 的 div 元素，它们分别被添加两个类 glass-by-filter 和 glass-by-backdrop-filter 来区分两种方法。
img { display: none; } 还是那句话，上面的内容不会阻止浏览器加载图片，即使它在视觉上是隐藏的。原因是 被认为是被替换的元素，所以我们无法控制它加载的内容。...对于 ，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。 SVG SVG被认为是一种图像，它最大的功能是在不影响质量的前提下进行缩放。...> 非开发者用户不能下载 在检查SVG元素并复制图片的URL之前，无法下载嵌入到SVG中的图片。...在开始解决之前，我们先问一下自己这个背景的性质。下面是一些入门问题。 对于用户来说，这个图片是重要的，还是可以跳过？ 我们是否需要在所有的视口大小上都要有它？... 一个需要动画化的简单标志 我们有一个简单的标志，它由形状和文字组成。
Jameson (@johndjameson) on CodePen. text-decoration 的最大问题是缺乏自定义。它继承文字的颜色及字号，并且无法通过跨浏览器的方式改变样式。...这种方法使用真正的 CSS border，意味着你可以改变它的颜色、粗细及风格样式。 以下就是 border-bottom 添加到 inline 元素上的效果。...Jameson (@johndjameson) on CodePen. 最大的问题是下划线到文本的距离——它完全在下行字母以下。...以下是在 Chrome 和 Firefox 中的效果： ? 在 IE、Edge 和 Safari 上的浏览器支持有问题。很难在 CSS 中测试 SVG 滤镜的支持情况。...有一个关于它 工作原理 的 9 分钟的视频，但是我可以简单说一下：它是通过 元素添加下划线。这是一种新方法，效果非常好。
这样，我们算是勉强得到了一个非直线路径运动动画，它的实际运动轨迹是一条曲线。...直到现在，我们有了一种更为强大的专门做这个事情的规范，也就是本文的主角 -- CSS Motion Path。...经过实测，Can i use 上写着 offset-anchor 属性的兼容性在为 Chrome 79+、Firefox 72+，但是实际只有 Firefox 支持，Chrome 下暂时无法生效~...利用 Motion Path 制作按钮效果 利用运动路径，我们可以制作一些简单的按钮点击效果。在之前，我在 CodePen 上见到过这样一种按钮点击效果： ?...最后 好了，本文到此结束，介绍了运动路径动画 Motion Path，并且利用它实现了一些以往无法简单实现的路径动画效果，希望对你有帮助 ?
，实际效果 Gif： CodePen Demo -- @scroll-timeline Demo 看到这里，大家应该能够理解 @scroll-timeline 的作用及含义了，它赋予了 CSS 能够基于滚动条的滚动去控制动画行进的能力...有了这些状态值，配合 scroll-offsets，我们就可以精确控制滚动动画的触发时间。...譬如如下的，滚动内容不断划入： 代码较长，可以戳这里，来自 bramus 的 Codepen CodePen Demo -- Fly-in Contact List (CSS @scroll-timeline...SVG 元素也不例外，这里我还简单改造了一下之前的一个 SVG 线条动画： 完整的代码你可以戳这里：CodePen Demo -- SVG Text Line Effect | Scroll Timeline...本文到此结束，希望对你有帮助 更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 收藏。
background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。...CodePen Demo -- bg-attachment:local 这次，图片正常跟随滚动条滚动了，按常理，这种效果才符合我们大脑的思维。...CodePen Demo 结合这张 GIF，相信能对 background-attachment: fixed 有个更深刻的认识，移动的只有视口，而背景图是一直固定死的。...: fixed 实现图片点击水纹效果 利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个，来源于这篇文章CSS Water Wave (水波效果)： CodePen Demo -- bg-attachment...CodePen Demo -- CSS 3D parallax 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。
上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 什么是混合？...我们以一个基本的例子来看一下它是如何工作的。 我的标题上方有一个圆圈。 我要做的是将文本与圆混合。...由于在SVG中减去了形状，因此这是不可能的。 一种解决方法是在SVG后面放置一个圆圈，并在悬停时对其进行着色。 ? 对我来说，这还不够。我也想反过来，三角形必须是白色的，其余的是蓝色的。...事例源码：https://codepen.io/shadeed/pe... 进入Background-Blend-Mode 它的工作方式类似mix-blend-mode，但具有多个背景图像。...事例源码：https://codepen.io/shadeed/pe... 着色图像 通过使用径向梯度，有一些有趣的结果比有用。这个想法是添加一个彩色的图像，使它与它混合。
这个并不是本文的重点，有兴趣的可以访问 css-tips (codepen.io)点击预览 有时候，为了突出强调产品的特点或者为了跟随设计的潮流，设计会用上渐变背景，比如 lulu UI Edge 版本中的...如果仍然采用拼接的方式，不可避免会出现衔接不上的问题，有明显的割裂感，视觉还原会大打折扣 ? 那么，如何实现这类效果呢？...自适应的svg 尽管做了一些优化，上面的代码量仍然非常可观，有没有更加简便的方式呢？ 想到了 svg... 一般情况下，svg 路径是固定尺寸的，只能 等比缩放 ，无法做到自适应。...完整代码可访问 tooltips-mask-svg (codepen.io)点击预览 三、paint 绘制 再来介绍一种未来的解决方式， CSS paint 。...这类带描边的其实以上方式都不太适用，clip-path 和 mask 都无法实现描边，不过有一个边框生成方案可以参考：有意思！
25px; border: 2px dashed #aaa; } 但是，原生的 dashed 有一个问题，就是我们无法控制虚线的单段长度与间隙。...假设，我们要这么一个效果呢虚线效果呢： 此时，由于无法控制 border: 2px dashed #aaa 产生的虚线的单段长度与线段之间的间隙，border 方案就不再适用了。...实现不带圆角的虚线效果 上面的场景，使用 CSS 实现起来比较麻烦的地方在于，图形有一个 border-radius。 如果不带圆角，我们可以使用渐变，很容易的模拟虚线效果。...: 20px; } 效果如下： 如果我们修改内部的 background: #eee，把它替换成重复角向渐变的这么一个图形： div { //... - background: #eee; +...完整的代码，你可以戳这里：CodePen Demo -- BorderRadius Dashed Border 最佳解决方案：SVG 当然，上面使用 CSS 实现带圆角的虚线边框，还是需要一定的 CSS
background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。...Demo 了解下 background-attachment 到底是什么意思： background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动...Demo -- bg-attachment:local 这次，图片正常跟随滚动条滚动了，按常理，这种效果才符合我们大脑的思维。...: fixed 实现图片点击水纹效果 利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个： [background-attachment: fixed Wave] CodePen Demo --...transform: translateZ，滚动滚动条，效果如下： [css3dparallax] 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
