自从看到前端大神说网页要用div+css来布局，用table布局太low后，为了假装大神，也抛弃了table。于是从此陷入了CSS兼容的泥潭，一发不可收拾。现在总结起来，装神不是你想装，想装就能装，不如当菜鸟。资深的菜鸟，无招胜有招，想用啥就用啥，这境界不亚于大神。关键是要跳出技术想技术，就拿网页布局来说，要看用户群体，如果是面对IT人士，你可花点时间用di …
css透明色代码
你是喜欢已经“成型”的主题，还是想要加入一些自己喜欢的元素呢?或者你也想动手制作一个自己想要的美化主题呢?其实这些想法完全是可以实现的，下面，我们来一起学习一下应该如何使用老牌美化插件 Winterboard 制作 iPhone 美化主题以及如何在下载好的主题加入自己喜欢的元素吧。 主题的基本结构通常来说，一个主题包基本上包含以下 4 个部分：1. 文件夹： …
本文翻译自 Learn CSS radial-gradient by Building Background Patterns，作者：Temani Afif 略有删改如果你是CSS渐变的新手，你可能听说过radial-gradient()。如果以前从未使用过它，那么这篇文章适合你。在本教程中，我将重点介绍一些真实的和实用的示例，以解释radial-gradi …
效果展示思路分析层级思路从展示的效果可以猜到这个效果由3层文字组成。表面一层黑色文字中间一层白色文字最低的一层是斑马条纹文字要实现多层文字，我首先想到的是文字投影 text-shadow ，但通常 text-shadow 只能投个纯色出来。于是思路要改一下，黑色和白色层是投影，斑马条纹是真正的文字本身。斑马纹思路看到这种条纹效果，我想到了背景图渐变。直接使用 …
像 px、em 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。一、基本说明1，vw、vh、vmin、vmax 的含义（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定 …
html2canvas 是一个用于将 HTML 元素渲染为 canvas 的 JavaScript 库，通过这个库可以实现将网页的一部分或者整个网页转换为图片。下面是关于 html2canvas 的功能、参数以及实例的详细介绍。功能截图功能：可以将指定的 HTML 元素或整个页面转换为 canvas 元素，进而可以将其保存为图片（如 PNG、JPEG 等格式 …
本篇将介绍几个css小技巧，目录如下：自定义引用标签的符号重置所有标签样式禁止文本选择制作小三角形自定义引用标签的符号默认q标签引用符号是浏览器根据不同语言环境自动设置的，当然我们也可以使用quotes属性自定义符号，如下实例：html：不乱于心，不困于情。不畏将来，不念过往。如此，安好听君一席话，胜读十年书理想的人物不仅要在物质需要的满足上,还要在精神旨趣 …
作者：SbCoco来源：iCSS前端趣闻说起 background-clip ，可能很多人都很陌生。Clip 的意思为修剪，那么从字面意思上理解，background-clip 的意思即是背景裁剪。我曾经在 从条纹边框的实现谈盒子模型[1] 一文中谈到了这个属性，感兴趣的可以回头看看。简单而言，background-clip 的作用就是设置元素的背景(背景图 …
今天躺在床上刷抖音的时候，看见了一个马克笔随便画星空的视频，很有意思。先看效果：开始需求分析：1、渐变色的背景2、画一颗树和一些草3、水面的倒影4、随便画点星星5、画一颗流星1、渐变色的背景先确定200*500的区域，使用css3的线性渐变属性，依次深蓝、浅蓝、紫色、粉色、黄色画出一个渐变色的背景。为了使背景更真实，使用同样的颜色顺序，在不同的角度，加上一些 …
一、颜色函数1. rgb() rgba()语法：rgb(red, green, blue) 或 rgba(red, green, blue, alpha)red, green, blue: 0-255 的整数或 0%-100% 的百分比。alpha: 0（透明）到 1（不透明）的小数。示例：color: rgb(255 0 0); * 红色（CSS4+ 空格 …