近期发现一些新的好玩的CSS属性和JS方法，记录一下。有表单内容颜色，原生对话框，原生日期时间选择控件，原生JS深拷贝方法，及CSS layer和has伪类等等。

先看效果：

这个效果的实现，重点是使用了svg滤镜

完整代码如下：

CSS工作组总结的CSS设计错误不完整列表。如果有人发明了时光机，那就应该纠正

关于html文档打印，实现指定位置分页这个需求，以前是不知道如何处理了的。

也不知道这个CSS属性是什么时候出现的。总之我是刚刚知道的。好久没有更新文章了，正好记录一下吧。

代码很简单，只要一个CSS属性就可以了。

    @media print{
      .page{
        page-break-after: always;
      }
    }

承接上篇： [05天]SVG矢量图形学习 

上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。

本篇是进阶内容，将会对svg的滤镜，动画，事件等等各特性做介绍说明。如果对svg还没有做过了解，请先阅读上篇。

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask是一个缩写属性名，其包含有：

1. mask-image
2. mask-size
3. mask-repeat
4. mask-position
5. mask-clip
6. mask-origin
7. mask-mode
8. mask-type

clip-path

可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。

这是一个神奇的CSS属性，值可以是以下几种

inset

剪裁成一个矩形

clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> )

以前只知道outline可以不占用流体空间实现焦点，边框效果。偶然间看到一篇外网文章，打开了新世界的大门。原来outline还可以玩这么多花样。

动画一

通过将outline-ofset负偏移达到遮罩效果，再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单

是不是在用CSS做文字排版时，经常会遇到并搜索这些问题：

CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行...

本文会解决以上的全部问题困扰！

说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。