css

CSS Grid 网格布局教程

一、概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。 上图...

元素底部为何有空白及其解决方案

一、为什么元素底部会有空白? 要理解这个问题,首先要弄明白CSS对于 display: inline 元素的 vertical-align 各个值的含义。vertical-align 的默认值是 baseline,这是一个西文排版才有的概念。   vertica...

css3实现背景模糊的三种方式

一、普通背景模糊 代码: <Style> html, body { width: 100%; height: 100%; } * { margin: 0; ...

css hack

IE 11 (及以上..) _:-ms-fullscreen, :root .foo { property:value; } IE 10 及以上 _:-ms-lang(x), .foo { property:value; } or @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) ...

Better SVG Fallback and Art Direction With The Element

Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you...

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,并自动...

你需要知道的CSS3 动画技术

译自:你需要知道的CSS3 动画技术 译自:What You Need To Know About Behavioral CSS 请尊重版权,转载须注明本站链接! 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观...

CSS3 时钟 rotate

利用 css3 transform 实现 (本文修改了 JS,原文:http://css-tricks.com/examples/CSS3Clock/) 预览 CSS3 Clock transform html 代码 <style type="text/css"> @import url("css/css3time.css");...

为开发者准备的 29 个顶级 CSS 工具和应用

当你需要编辑或改变网站设计时,CSS 起着重要的作用。 透过一些 CSS工具可以让新手开发人员和设计人员轻松地学习这门语言和它的功能。 今天,我们为你编制了30个有用的CSS工具和应用程序。使用下列工具,您将能...