15个非常强大但不常用的css特性

05月05日 CSS 没有评论 CSS,css特性

1. clip-path：自由裁剪元素形状通过定义多边形、圆形或 SVG 路径，实现非矩形元素的切割效果。动态多边形裁剪 .element { clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); /* 梯形效...

CSS 类似 iOS 的毛玻璃动态模糊效果

05月05日 CSS 没有评论动态模糊,毛玻璃

提到网页毛玻璃效果，总结下来有以下2种： 1. 模糊元素本身 2. 模糊元素后面的内容早在之前，1就已经可以通过 CSS3 filter 属性实现，而2一直没有一个好的解决方案。对1的运用，也可以达...

02月10日 CSS 没有评论 CSS

CSS想必大家已经非常熟悉了，任何一个页面都少不了它的身影。除了基础的样式设置，还有不少高级用法，能实现更复杂和精美的页面效果。一、现代布局 1.1 弹性布局（Flexbox）高阶技巧 .container { di...

02月09日 CSS,JavaScript 没有评论 CSS,JavaScript,菜单

当你设计网站时，网站导航是一个非常重要的考虑因素。它是你网站中的主要元素，可能也是用户交互最多的元素。尽管我们可以通过 HTML 和 CSS 创建一个简单菜单，但结合JavaScript 可以帮助提高创造力并改善整...

02月09日 CSS 没有评论 CSS,按钮

背景在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？本文基于一些高频出现在设计稿中的，使用 CSS 实现稍微有点难度和技巧性的按钮，讲解使用 CSS ...

02月09日 CSS,HTML 没有评论 CSS,HTML

这段代码创建了一个带有装饰性按钮的卡片(图片去边角)，通过 CSS 技术实现了按钮的装饰性效果，为页面添加了视觉吸引力。演示效果 HTML&CSS <!doctype html> <html> <head>...

04月22日 CSS 没有评论 CSS

在写一些页面时，有些东西老是感觉能解决但就是想不起来具体怎么写，本文记录一些容易忘但很实用的css属性。 01-video隐藏控件有时候页面上的video视频可能需要显示默认的进度条音量等控件 /* 隐...

03月01日 CSS 没有评论 CSS

01. 网站平滑滚动在<html>元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。 html { scroll-behavior: smooth; } 02. 链接的属性选择器此选择器的目标是具有以“https”开头的...

02月26日 CSS,面试没有评论 CSS,面试题

1、说说你对盒子模型的理解? 1.1 是什么当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的CSS基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形...

02月21日 CSS 没有评论 @layer,CSS

介绍 @layer又名级联层，是 css2022 推出的新特性，目的是用来解决样式被覆盖，使用混乱的场景。同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制，让 CSS 样式按照我们定义好的级联顺序展...