三十课

用CSS新属性实现特殊的图片显示效果

毛瑞 2019-09-19 发布
57 收藏

使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。

学习《CSS选择器Level-4》不完全版

毛瑞 2019-04-11 发布
11 收藏

选择器是CSS的核心组件。本文依据W3C的Selectors Level 4规范，概括总结了Level1-Level4中绝大多数的选择器，并做了简单的语法说明及示例演示。希望对程序员有所助益。

【基础】固定列宽的表格及示例演示

毛瑞 2018-08-14 发布
1 收藏

对我来说，table 有一个非常有用，支持性也很好的 CSS 属性，但它却很少为人所知。它改变了表格的渲染方式，并生成一个更加稳定可靠的布局。

使用min-content实现容器宽度自适应于内部元素

毛瑞 2018-08-10 发布
3 收藏

HTML原生就是响应式的（HTML内容在视口内流式的分布）。随着CSS的广泛应用，设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中，这有悖于HTML原生响应的特性。

【基础】CSS实现多重边框的5种方式

毛瑞 2018-05-04 发布
31 收藏

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案，大家可以根据项目实际及兼容性要求等情况，选择最适合...

【图片版】CSS网格布局（Grid）完全教程

毛瑞 2018-05-02 发布
75 收藏

CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重...

【基础】EM 还是 REM？这是一个问题！

毛瑞 2018-04-20 发布
208 收藏

应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM，根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。

【基础知识】Flex-弹性布局原来如此简单！！

毛瑞 2018-04-02 发布
28 收藏

布局的传统解决方案是基于盒状模型，依赖 display + position + float 方式来实现，灵活性较差。2009年，W3C提出了一种新的方案-Flex，Flex是Flexible Box的缩写，意为”弹性布局”。Flex可以简便、完整、响应式地...

【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？

毛瑞 2018-03-29 发布
128 收藏

浏览器内置的checkbox及radio样式效果太差，本例展示了一个简单大方的单选多选框样式。需要约25行的CSS代码，额外需要搭配三个png小图标。

150

【基础】这15种CSS居中的方式，你都用过哪几种？

毛瑞 2018-03-25 发布
405 收藏

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

基于规则评分的密码强度检测算法分析及实现(JavaScript)

毛瑞 2018-03-19 发布
49 收藏

用正则表达式做用户密码强度的通过性判定，过于简单粗暴，不但用户体验差，而且用户帐号安全性也差。那么如何准确评价用户密码的强度，保护用户帐号安全呢？本文分析介绍了几种基于规则评分的密码强度检测算法，...

身份证号码的正则表达式及验证详解(JavaScript，Regex)

毛瑞 2018-03-14 发布
113 收藏

居民身份证号码，正确、正式的称谓应该是“公民身份号码”。根据【中华人民共和国国家标准 GB 11643-1999】中有关公民身份号码的规定，公民身份号码是特征组合码，由十七位数字本体码和一位数字校验码组成。排列顺...