- 前言HSL 是CSS3引进的一种将 RGB 色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。 定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度（S）是指色彩的纯... 前言HSL 是CSS3引进的一种将 RGB 色彩模型中的点在坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。 定义与用法hsl() 函数使用色相、饱和度、亮度来定义颜色。HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。饱和度（S）是指色彩的纯...
- 一、导语自CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。 二、简单属性选择器如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。下面的例子是把包含标题（title）的所有元素变为蓝色：[title]{ color:blue;}如果希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}与... 一、导语自CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。 二、简单属性选择器如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。下面的例子是把包含标题（title）的所有元素变为蓝色：[title]{ color:blue;}如果希望把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}与...
- calc是英文单词calculate(计算)的缩写,是css3的一个新增功能; MDN解释：可以用在任何长度,数值,时间,角度,频率等处理;CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 S... calc是英文单词calculate(计算)的缩写,是css3的一个新增功能; MDN解释：可以用在任何长度,数值,时间,角度,频率等处理;CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。.foo { width: calc(100px + 50px);}如果你使用过 CSS 预处理器，比如 S...
- padding设置 p 元素的 4 个内边距：p{ padding:2cm 4cm 3cm 4cm;}所有浏览器都支持 padding 属性。注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替... padding设置 p 元素的 4 个内边距：p{ padding:2cm 4cm 3cm 4cm;}所有浏览器都支持 padding 属性。注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。定义和用法padding 简写属性在一个声明中设置所有内边距属性。说明这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替...
- 写在前面偶然看到，这里整理笔记博文涉及内容：使用CSS实现图片的磨砂玻璃效果Demo相关属性的简单文档说明理解不足小伙伴帮忙指正 傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波这里的磨砂玻璃效果主要使用 CSS的滤镜效果实现，滤镜效果是 CSS 的一... 写在前面偶然看到，这里整理笔记博文涉及内容：使用CSS实现图片的磨砂玻璃效果Demo相关属性的简单文档说明理解不足小伙伴帮忙指正 傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波这里的磨砂玻璃效果主要使用 CSS的滤镜效果实现，滤镜效果是 CSS 的一...
- 文章目录前言导航一、基本使用二、变量设置三、嵌套、拆分文件与引入四、@mixin与@include配合使用五、媒体查询与Mixin的使用 前言 本篇博客是关于CSS的进阶语法Sass，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 导航 Sass官网 vscode安装插件：Live Sass Compiler 启动： 一、基本使用 可使用scss或sass文件来进行 文章目录前言导航一、基本使用二、变量设置三、嵌套、拆分文件与引入四、@mixin与@include配合使用五、媒体查询与Mixin的使用 前言 本篇博客是关于CSS的进阶语法Sass，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 导航 Sass官网 vscode安装插件：Live Sass Compiler 启动： 一、基本使用 可使用scss或sass文件来进行
- 文章目录前言响应式布局@media学习前提准备@media使用 前言 本篇博客是关于CSS的响应式布局，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 响应式布局 @media学习 使用@media目的：让网站进行自适应，对移动端设备访问页面友好，适应各种窗口类型，根据屏幕宽度来判断输出使用不同的css样式。 前提准备 ①添加media标签 <meta nam 文章目录前言响应式布局@media学习前提准备@media使用 前言 本篇博客是关于CSS的响应式布局，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 响应式布局 @media学习 使用@media目的：让网站进行自适应，对移动端设备访问页面友好，适应各种窗口类型，根据屏幕宽度来判断输出使用不同的css样式。 前提准备 ①添加media标签 <meta nam
- 文章目录前言一、过渡1.1、过渡的基本介绍(transition: transform 1s linear 0s;)介绍transition及其属性属性过渡生效demo(7个示例)1.2、过渡的缓动效果(也就是1.1中第三个属性)1.3、实战案例案例1：图片信息显示(使用到过渡)案例2：图标旋转与放大过渡资源素材案例3：图片3D翻面案例3：正方体3D空间旋转二、动画2.1、认识动画及基本使用介绍动 文章目录前言一、过渡1.1、过渡的基本介绍(transition: transform 1s linear 0s;)介绍transition及其属性属性过渡生效demo(7个示例)1.2、过渡的缓动效果(也就是1.1中第三个属性)1.3、实战案例案例1：图片信息显示(使用到过渡)案例2：图标旋转与放大过渡资源素材案例3：图片3D翻面案例3：正方体3D空间旋转二、动画2.1、认识动画及基本使用介绍动
- 文章目录前言一、过渡1.1、过渡的基本介绍(transition: transform 1s linear 0s;)介绍transition及其属性属性过渡生效demo(7个示例)1.2、过渡的缓动效果(也就是1.1中第三个属性)1.3、实战案例案例1：图片信息显示(使用到过渡)案例2：图标旋转与放大过渡资源素材案例3：图片3D翻面案例3：正方体3D空间旋转二、动画2.1、认识动画及基本使用介绍动 文章目录前言一、过渡1.1、过渡的基本介绍(transition: transform 1s linear 0s;)介绍transition及其属性属性过渡生效demo(7个示例)1.2、过渡的缓动效果(也就是1.1中第三个属性)1.3、实战案例案例1：图片信息显示(使用到过渡)案例2：图标旋转与放大过渡资源素材案例3：图片3D翻面案例3：正方体3D空间旋转二、动画2.1、认识动画及基本使用介绍动
- 文章目录前言一、2D变形1.1、旋转变形transform: rotate(度数)-旋转角度，默认中心点旋转transform-origin属性(定义旋转点)1.2、缩放变形transform: scale(数字)-缩小与放大1.3、斜切变形transform: skew(角度，角度)1.4、位移变形transform：translate(px，px)二、3D转换2.1、绕X轴、Y轴旋转(rota 文章目录前言一、2D变形1.1、旋转变形transform: rotate(度数)-旋转角度，默认中心点旋转transform-origin属性(定义旋转点)1.2、缩放变形transform: scale(数字)-缩小与放大1.3、斜切变形transform: skew(角度，角度)1.4、位移变形transform：translate(px，px)二、3D转换2.1、绕X轴、Y轴旋转(rota
- 文章目录前言一、边框1.1、边框三要素(width、style、color)1.2、四个方向的边框1.3、去除边框1.4、小案例：利用边框制作三角形二、圆角(border-radius)2.1、圆角以px为单位2.2、圆角以百分比为单位三、盒子阴影(box-shadow)3.1、基本阴影(四个值)3.2、阴影延展(新增一个px值)3.3、内阴影(添加inset关键字)3.4、多阴影(,号隔开设置多 文章目录前言一、边框1.1、边框三要素(width、style、color)1.2、四个方向的边框1.3、去除边框1.4、小案例：利用边框制作三角形二、圆角(border-radius)2.1、圆角以px为单位2.2、圆角以百分比为单位三、盒子阴影(box-shadow)3.1、基本阴影(四个值)3.2、阴影延展(新增一个px值)3.3、内阴影(添加inset关键字)3.4、多阴影(,号隔开设置多
- 文章目录前言一、盒模型的概念(外扩)1.1、认识盒模型1.2、认识width与height属性1.3、认识padding1.4、认识margin(外边距)1.4.1、margin的塌陷问题(仅仅是上下)1.4.2、一些元素带有默认的margin1.4.3、盒子的水平居中1.5、盒子模型计算(嵌套使用，重要！！！)二、盒子模型(内缩，使用box-sizing)三、行内元素与块级元素backgroun 文章目录前言一、盒模型的概念(外扩)1.1、认识盒模型1.2、认识width与height属性1.3、认识padding1.4、认识margin(外边距)1.4.1、margin的塌陷问题(仅仅是上下)1.4.2、一些元素带有默认的margin1.4.3、盒子的水平居中1.5、盒子模型计算(嵌套使用，重要！！！)二、盒子模型(内缩，使用box-sizing)三、行内元素与块级元素backgroun
- 文章目录前言一、文本与字体属性1.1、文本样式属性1.2、字体样式(font-xxx)常用样式使用开源字体(阿里巴巴普惠体)①线上方式②本地方式(建议)二、继承性2.1、具有继承性的相关属性2.2、继承性—就近原则 前言 本篇博客是关于CSS的文字属性与继承性，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 一、文本与字体属性 1、常用文本样式属性 2、字体属性详解 文章目录前言一、文本与字体属性1.1、文本样式属性1.2、字体样式(font-xxx)常用样式使用开源字体(阿里巴巴普惠体)①线上方式②本地方式(建议)二、继承性2.1、具有继承性的相关属性2.2、继承性—就近原则 前言 本篇博客是关于CSS的文字属性与继承性，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博客目录索引(持续更新) 一、文本与字体属性 1、常用文本样式属性 2、字体属性详解
- 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、... 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、...
- 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、... 前言Hello！小伙伴！首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～哈哈 自我介绍一下昵称：海轰标签：程序猿一只｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！日常分享：微信公众号【海轰Pro】记录生活、...
上滑加载中
推荐直播
-
AI编码实干派，“码”力全开2026/02/26 周四 15:00-16:30
谈宗玮/于邦旭/丁俊卿/陈云亮/王一男
【中国，深圳，2026年2月26日】，以“AI编码实干派，码力全开”为主题的华为云码道（CodeArts）代码智能体新春发布会在线上成功召开。华为云码道公测版正式发布，为开发者和企业提供具备工程化能力的智能编码解决方案。
回顾中 -
华为云码道-玩转OpenClaw，在线养虾2026/03/11 周三 19:00-21:00
刘昱，华为云高级工程师/谈心，华为云技术专家/李海仑，上海圭卓智能科技有限公司CEO
OpenClaw 火爆开发者圈，华为云码道最新推出 Skill ——开发者只需输入一句口令，即可部署一个功能完整的「小龙虾」智能体。直播带你玩转华为云码道，玩转OpenClaw
回顾中 -
华为云码道-AI时代应用开发利器2026/03/18 周三 19:00-20:00
童得力，华为云开发者生态运营总监/姚圣伟，华为云HCDE开发者专家
本次直播由华为专家带你实战应用开发，看华为云码道(CodeArts)代码智能体如何在AI时代让你的创意应用快速落地。更有华为云HCDE开发者专家带你用码道玩转JiuwenClaw，让小艺成为你的AI助理。
回顾中
热门标签