这几年新出现的网络服务或应用程序都喜欢使用渐变色作为背景图，有一些则会选用高画质、高分辨率免费图库相片，相较于单色背景来说，渐层色看起来更有活力，且目前技术只要透过CSS3语法就能将渐层运用到网页中，不会拖慢网页加载速度，语法撰写方式也很简单，几乎可以说一段语法就能快速套用背景。
本文要推荐的「CoolHue」是一个相当实用的渐层背景网站，提供大约30种不同配色的渐层背景，可以免费下载为图片格式或产生CSS3语法。只要把它加入网站样式表，就能在任何区域套用渐层色彩。
2024年11月07日
这几年新出现的网络服务或应用程序都喜欢使用渐变色作为背景图，有一些则会选用高画质、高分辨率免费图库相片，相较于单色背景来说，渐层色看起来更有活力，且目前技术只要透过CSS3语法就能将渐层运用到网页中，不会拖慢网页加载速度，语法撰写方式也很简单，几乎可以说一段语法就能快速套用背景。
本文要推荐的「CoolHue」是一个相当实用的渐层背景网站，提供大约30种不同配色的渐层背景，可以免费下载为图片格式或产生CSS3语法。只要把它加入网站样式表，就能在任何区域套用渐层色彩。
2024年11月07日
设计师有时头疼配色方案，没有灵感的时候，可以试试在“UI Gradients”网站找一找好看的渐变色配色创作灵感。
地址：参见文末图
打开“
2024年11月07日
渐变色怎么做 (How to Create Gradient Colors)
渐变色是一种在设计、艺术和时尚中广泛应用的色彩效果。它通过将一种颜色平滑过渡到另一种颜色，创造出丰富的视觉体验。本文将详细介绍渐变色的制作方法，包括基本概念、工具选择、具体步骤以及应用实例。
渐变色的基本概念 (Basic Concepts of Gradient Colors)
渐变色的定义是颜色之间的平滑过渡。它可以是线性的，也可以是径向的。线性渐变是沿着一条直线变化，而径向渐变则是从中心向外扩展。渐变色可以用于背景、图形、文本等多种设计元素中，增加视觉层次感和吸引力。
2024年11月07日
rem、em和px都是CSS中用于设置元素尺寸的单位，它们的区别和计算方式如下：
px，像素，是一个绝对单位，它提供了一个具体的、固定的尺寸。1像素等于屏幕上的一个实际像素点，
2024年11月07日
一、px rem em区别
px
1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。
em
1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱问题。
2024年11月07日
1》原因
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了
2》解决方法
一．在ios8+中当devicePixelRatio=2的时候使用0.5px
p{
border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
2024年11月07日
最近，在几个不同的群里都遇到有人在问同一个问题，如何使用 CSS 实现如下所示的单侧阴影：
也就是正常而言，阴影应该是出现在多条边上的，而现在，我们只希望阴影固定只能出现在某一侧。
单侧阴影其实是一个非常老生常谈的话题，在 CSS 中之前也有比较巧妙的方式实现。当然，CSS 发展到今天，我们有了更多种不同方式来实现单侧阴影这个需求。本文，我们一共会介绍现阶段，实现单侧阴影可行的三种方式：
2024年11月07日
# CSS 面试题
## 01. 盒模型
盒模型分为标准盒模型和怪异盒模型
- 标准盒模型：实际宽度由 宽度 + padding + border 组成(box-sizing: content-box)- 怪异盒模型：内容宽度为 定义的宽度 - padding - border(box-sizing: border-box)
## 02. 什么是文档流
文档流是元素在 web 页面上的一种呈现方式，按照出现的先后顺序进行排列
2024年11月07日
水平居中
1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.
2) 若是块级元素, 该元素设置 margin:0 auto即可.
3) 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置: