- 前言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】记录生活、...
上滑加载中
推荐直播
-
HDC深度解读系列 - Serverless与MCP融合创新，构建AI应用全新智能中枢2025/08/20 周三 16:30-18:00
张昆鹏 HCDG北京核心组代表
HDC2025期间，华为云展示了Serverless与MCP融合创新的解决方案，本期访谈直播，由华为云开发者专家(HCDE)兼华为云开发者社区组织HCDG北京核心组代表张鹏先生主持，华为云PaaS服务产品部 Serverless总监Ewen为大家深度解读华为云Serverless与MCP如何融合构建AI应用全新智能中枢
回顾中 -
关于RISC-V生态发展的思考2025/09/02 周二 17:00-18:00
中国科学院计算技术研究所副所长包云岗教授
中科院包云岗老师将在本次直播中，探讨处理器生态的关键要素及其联系，分享过去几年推动RISC-V生态建设实践过程中的经验与教训。
回顾中 -
一键搞定华为云万级资源，3步轻松管理企业成本2025/09/09 周二 15:00-16:00
阿言 华为云交易产品经理
本直播重点介绍如何一键续费万级资源，3步轻松管理成本，帮助提升日常管理效率！
回顾中
热门标签