pattern属性是HTML5里出现的新属性，它适用于type类型为text, search, tel, url, email, 和 password等的input元素上，配合:valid伪类，就能实现JavaScript里的正则表达式等效的校验算法。

iPhone X 配备一个覆盖整个手机的全面屏，顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个“安全区域”，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。

初看起来，好像觉得这个效果实现很难，实际上，CSS3里面针对这种特定形状环绕的效果已经支持很久了，CSS3 Shapes和CSS3 Regions都是可以实现的，本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

这一点，我昨天在查资料写这篇文章—最全面的元素水平垂直居中方法汇总的时候就发现有个大牛也理解错了—-CSS布局奇淫技巧之–各种居中里面的第八点。

will-change 属性这种现象跟元素层叠顺序(类似z-index)混乱有关，但是因为要使用 will-change 属性，就必须要接受这种混乱的现实。

我想，这些浏览器开发商和规范制定者会说：“你想要更好的性能。而这些是我全部能做的了。有些事情我们做不了，但你们知道怎么做。这些之外的事情我们会尽力做好，剩下的事情你们来告诉我如何能做的更好。”

如果你开发的页面非常复杂，那么，这个CSS的contain技术可以帮助你优化页面的性能。而对于第三方的小饰件，始终使用contain: strict;是很好的习惯，它可以保护你的页面不受它们的干扰而出现性能问题。

然而，千万不要过度使用will-change属性，否则，事与愿违，页面的执行效率会降低，推荐的做法是当一个元素或属性发生变化时打开will-change，变化完成之后关闭它。

除了vm和vh两种单位外，还有两种类似的单位：vmin——取vw和vh中较小的一个为基准，和vmax——取vw和vh中较大的一个为基准。它们同样是一个单位数值，跟px、em、%的用法类似。

今天在网上看到一有趣的开关按钮的制作，用到了SVG、css3和js，下面的演示中还引用了TweenMax.min.js，这是一个js动画工具库。

上面的这个加载中效果，以前是用gif动图实现的，但随着CSS的进步，CSS动画功能越来越强大，我们只用一小片段HTML和CSS就能实现，方便了很多，体积也减小了很多。

终于找到了一个好方法，使用:not(:last-of-type)简单方便，再也不要麻烦的单独使用:last-of-type了，不错！

问题是这样的：如果几个inline-block元素放在一起，它们的代码是按常见的HTML标准格式化，那么，在它们之间就会存留一些空格。

Web开发人员在调试网页时经常会遇到clear:both不起作用的情况，clear:both的作用是让改元素不浮动，让它在左右两边都没有其它网页元素排列。大多数情况下我们需要用用到clear:both，是因为让一个网页元素float:left或float:right时，它却浮动在其它元素旁，

本演示关键使用了几个新型的CSS属性(background-blend-mode, mix-blend-mode, 和 filter)，利用这些属性，我们可以让同一张图片呈现出各种不可思议的神奇效果。

今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！就让我们一起来交个朋友吧~

三维立体效果我觉得是CSS3中最有意思的地方，不得不佩服那些开发者大神们，让我们能够通过几行CSS代码就能得到酷炫的视觉体验。

CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

觉得黑得可以的点个赞呗。

这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念，通过学习flexbox布局，你会发现以往遇到的所有的关于布局的问题，现在都可以轻松解决了。

用CSS3绘制的各种小图标

在看这篇文章之前你可能会觉得border只是简单的绘制边框，看了这篇文章，我相信你也会跟我一样说一句“我靠，原来css中的border还可以这样玩”。这篇文章主要是很早以前看了别人用纯CSS绘制三角形后自己的一些思路的整理，文中会介绍几种小图标的效果。

今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

纯文本，纯CSS，简单干净的CSS动画，使用方便，完全可以替代图形进度条，加载等待git动图等

用css3 给checkbox添加动画特效，当用户点击时，它们会表现的像个小动物

用CSS3改radio input添加点击时的动画特效

谷歌HTML/CSS代码格式指导

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用 padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接，选择文本或拖放等。

CSS里的user-select属性用来禁止用户用鼠标在页面上选中文字、图片等，也就是，让页面内容不可选。也可以只允许用户选中文字，或者全部都放开，用户可以同时选中文字、还包括文本里的图片、视频等其它东西。user-select属性的作用是元素基本的，它不仅可以作用整个页面，也可以只在指定的元素和其子元素上生效。

我们将这些防止错误出现的程序称为”linters”。Javascript中有几个比较好的linter。但是在CSS中，我们就没有这么幸运了，我们的选择十分有限: 基于Ruby的，具有特殊预处理程序的scss-lint和较早的CSS Lint。现在我就要开始介绍一下我们开发的工具: stylelint.

单选框Radio和多选框checkbox需要美化吗？当然，原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化，我们有借 助Javascript来做美化的，也有直接用CSS来美化的，今天我给大家介绍使用纯CSS实现radio和checkbox的美化。

CSS中的 animation 属性可以让很多其它CSS属性产生动画效果，比如color, background-color, height， width等。当然，你需要为每个动画定义@keyframes CSS规则，animation需要调用这些@keyframes产生动画效果

如何让table元素也能表现出自适应性？按HTML5的说法，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢？