在CSS3之前，网页中背景图片的尺寸往往是图片的实际尺寸，我们无法在网页中规定它的大小尺寸。但是在CSS3中我们可以规定它的尺寸，方便了我们在网页中使用不同尺寸但相同图片的背景。
在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。
将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。
首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是：
之前在知乎看到一个很有意思的讨论 一行代码可以做什么？那么，一行 CSS 代码又能不能搞点事情呢？
CSS3简介 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强 或新增 了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 CSS3的现状 PC端浏览器支持程度差，需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 关于私有前缀： 在标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性 目前
本系列主要总结Css3一些新特性的认识，来源于《css揭秘》书。 一、半透明边框 css3最好用hsla，而不是rgba，hsla是：h：颜色值(0~360)；s：饱合度(0%~100%)；l：亮度(0%~100%)；a：透明度(0~1) background-clip：裁剪背景颜色，默认为border-box(背景颜色扩散到border）；padding-box（背景颜色扩散到padding）；content-box（背景颜色扩展到content) 示例代码： width:200px; height:20
在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：
box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。 喜欢 markdown 版本的可以戳这里 。 box-shadow 常规用法 说到 box-shadow ，首先想到的必然是它能够生成阴影，所以称之为 shaodow ，简单看看它的语法： 基础属性语法 box-shadow 属性向框添加一个或多个阴影。 box-shadow: h-shadow v-shadow blur spread color inset;
假设我们想给一个容器设置一层白色背景和一道半透明白色边框，body 的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的：
相信你以前肯定尝试过 CSS 中的半透明颜色，比如 rgba() 和 hsla()。
background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
在上一篇 巧用滤镜实现高级感拉满的文字快闪切换效果 中，我们提到了一种非常有意思的之前苹果展示文字的动画效果。
在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。
本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频
最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。 正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家
用caniuse查看text-stroke兼容性的时候，发现了一件令我震惊的事情，最新版的Firefox以及Edge已经支持text-stroke描边属性了，并且全部都是采用-webkit-私有前缀。
格式你 feed，但是我想我不会用，因为 feed 主要用于阅读，最简单是最适合阅读的，但是如果你想把你的 feed 做的漂亮些，就试试这个插件吧！这篇文章翻译自 Weblog Tools Collection 的 APAD: Feed Styler
http://caniuse.com/ 1、私有前缀及其用法 .round{ -khtml-border-radius: 10px; / Konqueror / -rim-border-radius: 10px; / RIM / -ms-border-radius: 10px; / Microsoft / -o-border-radius: 10px; / Opera / -moz-border-radius: 10px; / Mozilla (如 Firefox) / -webkit-border-radius: 10px; / Webkit (如 Safari 和 Chrome) / border-radius: 10px; / W3C / }
今天分享一下开测前端代码的一些优化，及使用的一些小技巧，来优化我们的网站，前端开发中最常见的问题就是很少使用ES6方法导致代码冗余，不够清晰，定时器和闭包导致内存溢出及泄露,网站中css导致排版错乱，请求图片过多，导致网站加载缓慢，网站中兼容各种浏览器的问题。
emm，不考虑兼容性的话，答案是可以利用文字的 -webkit-text-stroke 属性，给文字二次加粗。
QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏。(本秘籍主要讲述使用HTML + CSS技术方面) 一、自适应 Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在
css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。
经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。
2020年4月4日，星期六农历三月十二清明节。在以往的这一天或许并没有太多的特别之处。但今年我国正经历着一场浩劫，新冠肺炎席卷武汉和湖北地区，无数的白衣天使冲向一线，给中国人民构筑了一道坚固的抗疫长城。在这场战役中有一些英雄倒在了抗疫一线。如今，全国为在新冠肺炎中牺牲的英雄和失去生命的同胞降半旗默哀。
近些年，我们总是听到硬件加速，以及它如何帮助我们提升网页的动画性能，让网页动画变得更好，在移动端更流畅。那么什么是硬件加速？如何触发硬件加速呢？
当我们对一个页面进行布局时，性能瓶颈通常是 style、layout、paint。
less的优势有很多，最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写css时如果元素过多，每个都像
在群里会有同学问相关的问题，怎么样使用 CSS 实现一个内切角按钮呢、怎么样实现一个带箭头的按钮呢？
暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《CSS揭秘》，里面有很多有意思的CSS技巧，有时间有兴趣的朋友可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的迷惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点进行了总结归纳：
简述: HTML 标签原本被设计为用于定义文档内容, 通过使用 、、
、
「 傍晚时分，你坐在屋檐下，看着天慢慢地黑下去，心里寂寞而凄凉，感到自己的生命被剥夺了。当时我是个年轻人，但我害怕这样生活下去，衰老下去。在我看来，这是比死亡更可怕的事。--------王小波」
HTML是具有语义化的语言，针对网页的布局，有一类标签代表各种意义的“布局盒子”。所有的布局类标签都主要用来构建页面的内容区域，是双标签类型，是双标签类型，默认显示为块状元素。
前面我们了解过了盒模型，知道盒子由外边距、边框、内边距和内容区组成。对于整个盒子，我们可以通过一系列的手段来美化，如指定盒子的背景、边框以及盒子的阴影。
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
<!DOCTYPE ”此文仅为个人学习的知识梳理，权威且更详细的内容请查阅w3school。“>
修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、FireFox、Chrome、Safari、Opera 二、CSS3 背景图像定位 background-position （背景定位） background-position: px / %
说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。 接下来的行文内容大概会按照
今天，我们来看这么一个非常常见的切图场景，我们需要一个带圆角的虚线边框，像是这样：
全名Don't Repeat Yourself，该原则适用于所有编程语言而不限于css。
其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。
本文的标题是如何写出让别人看不懂的选择器，但是本意不是希望大家去写如此复杂的选择，一些复杂（怪异）的选择器在一些特定场景下也许有着妙用，又或者写出这种选择器是基于当时的特殊背景。
我们在做wordpress速度优化时总可以发现很多插件都提供了css/js合并功能。那么我们真的需要启用这个功能吗？
目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合的实现方案。
HTML5学堂：CSS3文本阴影是给文本添加阴影效果，而在CSS3文本阴影在CSS以及存在了，只是CSS2.1的时候不用了，但是在CSS3又重新使用了，这是因为前端开发者对文本阴影开始重视了，使用更加广泛了！而本章对CSS3文本阴影的讲解希望对大家有帮助！谢谢~~ CSS3阴影的种类 可以分文字阴影和盒模型阴影。在最早做网页的时候，阴影效果是没办法实现的，只能用图片代替，现在有了CSS3的阴影属性box-shadow以及text-shadow来实现阴影。这样我们可以不需要图片也可以实现阴影效果了，一方面能减
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
