标签： css

现代 CSS 高阶技巧，不规则边框解决方案

本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！ 现代 CSS 高阶技巧，完美的波浪进度条效果！ 在上三篇中，我们详细介绍了 CSS Painting API 是如 ...

现代 CSS 高阶技巧，完美的波浪进度条效果！

本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！ 在上两篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！ ...

教你用CSS实现表单部件

案例介绍 欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！我们来用CSS编程实战案例，使用列表标签完成一个下拉菜单样式的表单部件。 案例演示 运行代码后在浏览器弹出由标签组成的下拉菜单样式的列表。 源码学习 进入核心代码学习，我们先来看HTML模板中的代码。 <!-- 有个小院-兴趣编程 ...

用HTML CSS 实现简洁美观的时间线（历史年表）

前几天在B站刷到尼尔后突发奇想，就想给尼尔做一个简单的小网站，在思考如何体现尼尔的世界观的时候想到了使用时间线的方式，将所有时间的事件罗列起来。所以就试着做了一下，这种方式可以很直观的表现一些历史上发生的事情，历史相关主题的一些网站应该可以参考一下 首先来看效果 以上都是游戏里的一些历史，简单的设计 ...

CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。 css中margin外边距（重叠）合并现象 css中margin外边距穿透现象 css中margi ...

现代 CSS 之高阶图片渐隐消失术

在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： <div class="img"></div> div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .i ...

Web前端进阶高薪必会的54个CSS重难点知识梳理（1）

本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。 因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下： CSS选择器与优先级 ...

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

一、什么是防御式编程 防御性编程是一种细致、谨慎的编程方法（习惯）。我们在写代码时常会有“以防万一”的心态，把以防万一有可能出现的情况提前考虑进去，规避以免以防万一出现带来的问题。 应用防御性编程技术，你可以侦测到可能被忽略的错误，防止可能会导致灾难性后果的“小毛病”的出现，在时间的运行过程中为你节 ...

兼容IE全版本及所有市面浏览器的网页变黑白处理方式

大家应该有发现最近几天不少网站变成了黑白色，在哀悼日时，很多网站都需要全站变成黑白配色，今天对这个实现的技术做了一些探索性了解，在此进行一个记录分享。 使用的样式部分：下面的css部分想必大家应该都可以看懂，主要是对主流的谷歌内核浏览器和小众些的品牌浏览器做整体的网页图片处理，IE浏览器除了IE10 ...

除了 filter 还有什么置灰网站的方式？

大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： 当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。 像是这样，我们仅仅需要给 HTML 添加一个统一的滤镜即可： html { filter: grayscal ...

CSS伪类使用详解

基本描述 CSS伪类是很常用的功能，主要应用于选择器的关键字，用来改变被选择元素的特殊状态下的样式。 伪类类似于普通CSS类的用法，是对CSS选择器的一种扩展，增强选择器的功能。 目前可用的伪类有大概40多个，少部分有兼容性问题。我们比较常见的，如::hover、:root、:first-child ...