这个问题通常是因为图片在缩小时没有正确的anti-aliasing（抗锯齿）处理导致的。在CSS中，可以通过image-rendering属性来改善这种情况。
解决方法：
在CSS中为图片设置image-rendering属性为pixelated或者crisp-edges。这会指示浏览器在缩小图片时尽量避免锯齿。
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-
CSS 改变 SVG 图片颜色的方法主要涉及对 SVG 元素内的 fill 和 stroke 属性进行操作。以下是如何通过CSS来更改SVG颜色的基本方式：填充颜色 (Fill Color)： 如果你想改变SVG图形内部填充的颜色，可以针对SVG内的相关元素（如 path 、 circle 、 rect 、 polygon 等）应用 fill 属性：svg path {
fill: red;
}
这段代码将会把所有SVG路径元素的填充颜色改为红色。描边颜色 (Stroke Color)： 要改变SVG图形边框或轮廓线的颜色，则可以使用 stroke 属性：svg polyline {
很多视口我们要对横屏和竖屏显示不同的布局，所以我们需要检测在不同的场景下给定不同的样式：1 JavaScript检测横屏window.orientation:获取屏幕旋转方向window.addEventListener("resize", ()= {
if (window.orientation === 180 || window.orientation === 0) {
// 正常方向或屏幕旋转180度
console.log('竖屏');
};
if (window.orientation === 90 || window.orientation === -9
&::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #aaa; /* or add it to the track */
}
&::-webkit-scrollbar-thumb {
background: #000;
}
主要文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar
网上看过很多 Switch 的例子，很多还需要额外的 label 或者 i 标签配合来实现，看到有个完全使用 CSS3 来实现的例子。只使用 CSS3 的伪类就可以实现。HTML： input type="checkbox" class="switch"
input type="checkbox" class="switch" checked
input type="checkbox" class="switch" disabled
input type="checkbox" class="switch" checked disabled
CSS.switch {
box-s
一，放大图标方法一：直接修改图标的 font-size。方法二：使用 transform:scale(1.5) 放大图标，需要注意有时在 iconfont 上是无效的，因为 transform 只能使用在块状元素上。比如：display:block 或者 display:inline-block。二，图标位置图标和文字往往不在一条基线上，常常需要调整 iconfont 图标的位置，最简单的方法是：.some-div .iconfont{
position: relative;
top：0.1rem;
}
另一种方法是使用 vertical-align 属性设置元素的垂直对齐方式。该属性
媒体查询（Media queries）非常实用，尤其是当你想要根据设备的大致类型（如打印设备与带屏幕的设备）或者特定的特征和设备参数（例如屏幕分辨率和浏览器视窗宽度）来修改网站或应用程序时。使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态。媒体特性（Media features）描述了 user agent、输出设备，或是浏览环境的具体特征。媒体特性表达式是完全可选的，它负责测试这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。最常用的媒体特性肯定就是“width"了。今天介绍的这个 CSS
Window.getComputedStyle()Window.getComputedStyle()方法返回一个对象，该对象包含元素的所有 CSS 属性的值。获取元素属性 style
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
/style
div id="elem-container" dummy /div
div id="output" /div
script
function getTheStyle
SVG 的知识基础你可能学习过关于 SVG 的基础知识，并且能读懂 SVG 的结构。至少你知道：SVG 元素： svg ， symbol ， g ， path SVG 属性： d， fill， stroke， stroke-width注意：从绘图工具中导出的 SVG 经常带着一些不必要的内容和标签等（其中 d 下面包含了清晰的路径数据），可以使用工具比如 SVGOMG ，然后比较一下处理前后哪些东西是移除或简化过的。移除颜色数据通常单色图标的源文件中， path 的颜色都是黑色 #000000。并且没有 fill 属性。如果我们在 SVG 文件中设置了 fill 属性，就不能通过 CSS
iconfont.cn 官方给我们讲解 iconfont 的实现原理。字体内部我们来看下一个字体的样子。我们可以通过一些软件打开字体，比如fontforge，fontlab。比如下面的方正大草字体：我们打开看下：可以看到“我”这个字对应的的图形就是我们在网页上看到的样子。另外注意左上角的unicode。是6211，也就是我们的另一种表现形式。再双击可以看到我这个图形的样子:其实就是一些路径。而这个路径可以用ai，ps，sketch等等来画，画完粘贴到这里。iconfont1.0所以我们就可以做一些事情了，我们可以去改造字体，把一个字对应的图形换成我们设计师设计的样子，处理好兼容性就成了我们ic
蛮荒时期 CSS Sprites在很久很久以前，使用图标一般是直接使用图片，或者使用雪碧图。缺点是颜色单一，难以维护。//CSS
[class^="icon-"],[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url(bootstrap/img/glyphicons-h
node-sass 的问题之前一直用的是 node-sass，他包含两部分，一个是使用 Node.js 编写的包裹器 Wrapper，一个是使用C++编写的 Sass 编译器 libsass，最开始是不同平台编译这个编译器麻烦，后来node-sass就直接发布各个平台编译好的编译器了。在国外就解决了编译的问题。在国内因为下载源被墙，所以常出现各种安装失败。https://javascript.net.cn/articles/657https://javascript.net.cn/articles/631sass 官方主推 dart-sassdart-sass是Sass的主要实现，它快速，易于
一，流光按钮 CSS 样式.btn{
width: 100px;
height: 50px;
border-radius: 50px;
text-align: center;
background-color:aqua;
line-height: 50px;
background-image: linear-gradient(to left , #EAD6EE,#A0F1EA,rgb(124, 241, 241),#e3a5f0,#EAD6EE);
background-size: 400%;
}
@keyf
方法一，基本方法为每一份主题写一份 CSS 文件，批量替换颜色，例如 style.css、style.dark.css。如果需要切换模式的花，只需要 改变 link 指向的 CSS 文件路径。方法二，使用 SCSS 等工具引入颜色变量在方法一的基础上，生成多个 CSS 文件路径。方法三，使用CSS自定义属性（变量）CSS 原生变量支持，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦哎～）。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。属性名需要以两个减号（--）开始，大小写敏感，属性值可以是任何有效的CSS值。和其他属性一样，
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block。但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 !DOCTYPE html
html
head
title
怪异模式（quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术。怪异模式特点：1.采用的是IE盒模型，即将border和padding包含在了height和width中。在 IE 盒模型中，box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom
一，响应式网页设计响应式网页设计( RWD，Responsive Web Design) 这个术语，由伊桑・ 马科特( Ethan Marcotte )提出。他在AList Apart发表了一篇开创性的文章，将三种已有的开发技巧(弹性网格布局、弹性图片、媒体和媒体查询)整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。 上面仅列举了其中一部分！不过，正如马科特等人所说，真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前设计网页的方法。以往我们先是针对桌面电
.head-section{
width: 100%;
height: 360px;
position: relative;
z-index: -1;
overflow: hidden;
}
.head-section::after{
content: '';
display: block;
width: 160%;
height: 200%;
border-radius: 50%;
position: absolute;
left: 50%;
top: -10
这个属性可以取消 pading 和 border 宽度对盒装模型的影响。语法box-sizing: content-box|border-box|inherit;content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承 box-sizing 属性的值。