所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。由摩托罗拉公司研发。最初该技术是用于Moto Aura上。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜显示屏

当我们写css的时候，有时候会忘记设计里面存在的临界情况。举个例子来说吧，当内容的长度超过了我们的期望值，我们也无法解释其中的可能性，页面的设计很可能会因此而崩掉。我们不能保证css总是会按照我们期望的那样工作，但至少我们可以用不同类型的内容来测试，以减少

今天分享一个用纯CSS实现的3D按钮。css巧妙利用了box-shadow来实现3D物体的立体感，当按钮按下的时候再去修改box-shadow和top值。css代码非常少，如下所示。font-family: "Microsoft YaHei&qu

css是一门功能强大、具备完整生态的复杂语言。它拥有很多的技巧， 但是生活工作中我们可能不怎么会接触到，这包括一些实际上挺实用的技巧。在此，特地列举一些css里比较容被忽略的小知识，希望能对你有所帮助。跟圆形的实现一样，这里也是用到border-radiu

前段时间遇到网站换肤的需求，本想挺简单的，直接用 Sass 或者 Less 设置变量就好了，结果导致的问题就是 js 中设置的样式。得单独设置，好麻烦。查了好多资料，最终的解决方案如下：。@value bgcColor: red; 会导出@ 后面的变量

css流体布局下的宽度分离原则宽度分离原则就是将width独立占用一层标签,而border、margin、padding利用流动性在内部自适应呈现。}此时.box的宽度是102px,然后设计师需要20px的留白那么现在我们需要增加padding:20px;

相信在工作中经常会遇到需要某某元素垂直水平居中的需求，下面总结一下实现方法元素已知宽度绝对定位 + margin反向偏移html. 当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了。

直接进入正题，鼠标跟随，顾名思义，就是元素会跟随着鼠标的移动而作出相应的运动。大概类似于这样：。通常而言，CSS 负责表现，JavaScript 负责行为。当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画

但可以一链代码解决。这个列表显示顺序是 左边 123右边456，不符合正常展示逻辑；然后可以使用js对数据进行预处理；大致逻辑如下：。// 使用reduce函数接受一个初始值{ 0: [], 1: [], length: 2 },// 初始值包含两个空数组

本文讲的等宽布局是在不手动设置元素宽度的情况下，使用纯css实现各个元素宽度都相当的效果。

webpack4 提倡， 一旦用了这个， 不能使用style-loader 以及css module安装npm install --save-dev mini-css-extract-pluginrulesrules: [

张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循“后来居上”和“谁大谁上”的层叠原则。z-index实践经验非浮层元素避免设置z-index值，z-index值不需要超过2使

ellipsis： 当对象内文本溢出时显示省略标记（...）。-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。display: -webkit-box; 必须结合的属性 ，将对象作

简介媒体查询早在在css2时代就存在,经过css3的洗礼后变得更加强大bootstrap的响应式特性就是从此而来的.简单的来讲媒体查询是一种用于修饰css何时起作用的语法.Media Queries 的引入，其作用就是允许添加表达式用以确定媒体的环境情况，

偶尔看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。/*参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级 */. border-radius:100px 100px 0 0;/* 正方形的

SASS 是 CSS 预处理器的简称。本文太长，工作中用的最多的就是嵌套混合和集成，可以搜索来跳转！SASS 编译环境 koala 命令行的方式编译（推荐）：。安装路径中不能有中文，和特殊符号ruby 一定要添加到环境变量gem install sass

GCSS–一个用GO语言编写的CSS预处理器。LESS–向下兼容CSS并为当前的CSS增加额外的功能。Myth–只用写纯CSS而不用担心浏览器加载缓慢。PCSS–一个用Python语言编写的CSS预处理器。Blueprint–这个CSS框架为你提供易用的栅

}三角形左下角 Triangle Bottom Left#triangle-bottomleft {

随着技术的发展，目前css已经发展到了第三阶段css3.css3能够支持更多的动效，以前需要用js来实现的动画、过渡，计算等功能，如今大多都能够用css来实现，而且性能更佳。当然，随着业务的需要，在编写css过程当中，为了能够让css具备js的可复用性，灵

第四天，背景边框列表链接和更复杂的选择器日期总用时学习目标2018.08.014h见下文学习目标CSS 背景CSS 列表样式CSS 的值和单位层叠和继承学习内容第四天，背景边框列表链接和更复杂的选择器CSS 介绍学习笔记CSS 背景？元素的背景是指，在元素