最近项目中看到这样的一个切角效果，如下所示 就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？ 一、自适应方式 这种布局一般有两种自适应方式，当然具体需要哪种可以

在这篇文章中，我将分享21个HTML技巧和代码片段，可以提高你的编码技能。希望对你有帮助，欢迎留言讨论你知道的其他优化方式。

下面总结了一些常用又有趣的css技巧，希望大家收藏，以减少查资料的时间。 css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -…

今天来看一些有趣且实用的 CSS 小技巧！ 1. 打字效果 代码实现： 实现效果： 2. 设置阴影 当使用透明图像时，可以使用 drop-shadow() 函数在图像上创建阴影，而不是使用 box s

在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS

最近，有群里在群里发了这么一个非常有意思的卡片 Hover 动效，来源于此网站 -- key-drop，效果如下： 非常有意思酷炫的效果。而本文，我们不会完全还原此效果，而是基于此效果，尝试去制作这么

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率…

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 先上效果图 如何实现 如下源码 原理 利用伪元素即可轻松实现，宽高以及圆角边框可以看具体需求去调整 最后

在平时开发中，有时候会碰到下面这种“弧形”样式，主要分为“内凹”和“外凸”两种类型，如下 该如何实现呢？或者想一下，有哪些 CSS 属性和“弧形”有关？下面介绍 3 种方式，一起看看吧 一、borde