html打印
打印分页
关于html文档打印，实现指定位置分页这个需求，以前是不知道如何处理了的。 也不知道这个CSS属性是什么时候出现的。总之我是刚刚知道的。好久没有更新文章了，正好记录一下吧。 代码很简单，只要一个CSS属性就可以了。 @media print{ .page{ page-break-after: always; } }...
141
svg
承接上篇： [05天]SVG矢量图形学习 上篇主要是对svg基础做了介绍。用以满足日常svg图形的基本使用。 本篇是进阶内容，将会对svg的滤镜，动画，事件等等各特性做介绍说明。如果对svg还没有做过了解，请先阅读上篇。...
182
CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 mask是一个缩写属性名，其包含有： mask-image mask-size mask-repeat mask-position mask-clip mask-origin mask-mode mask-type...
353
clip-path 可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 这是一个神奇的CSS属性，值可以是以下几种 inset 剪裁成一个矩形 clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> )...
210
以前只知道outline可以不占用流体空间实现焦点，边框效果。偶然间看到一篇外网文章，打开了新世界的大门。原来outline还可以玩这么多花样。 动画一 通过将outline-ofset负偏移达到遮罩效果，再hover时正偏移到外部并减小其宽度变为一个外边框。这个实现代码相对简单...
213
CSS换行
CSS不换行
CSS英文换行
CSS中文不换行
是不是在用CSS做文字排版时，经常会遇到并搜索这些问题： CSS换行,CSS不换行,CSS英文换行,CSS中文不换行，CSS标点符号不换行... 本文会解决以上的全部问题困扰！ 说大全属实有点吹牛皮了，不过确实很全面的集中了CSS中关于CJK与Non-CJK字符集的换行相关属性。并逐一进行了解释说明。也不用全记住，在需要时，打开本页面当字典查阅一下就可以了。 ...
732
乍一想，好像媒介查询很简单，已经一直在用的东西，还有什么好学的。看了大佬的文章才知道。还有这么多好玩的东西可以学可以用！ 我以为我所熟知的： @media (max-width: 640px) { /* css here */} 就这？ 大佬教我的： 一、媒介查询的更多打开方式 媒介查询不只是能用在CSS代码块中，还可以用在引入CSS的链接中，甚至是JavaScript中。 例如： <link rel="stylesheet" href="default.css"&g...
393
CSS3D
transform
perspective
第29天了，不知道再写些什么了。就再复习复习CSS 3D吧。了解下基本的3D概念，就是二维变三维。从x,y坐标到x,yz坐标。CSS 3D采用左手坐标系伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上。其余的手指指向前方，这样就建立了一个左手坐标系。其中，拇指、食指和其余手指分别代表x，y，z轴的正方向...
424
CSS渐变
linear-gradient
radial-gradient
CSS渐变有两种线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。...
441
这是一条普通的HTML分割线 <hr class="line1"> 两条实线 .line1{ border: 0; border-bottom: 3px double; } 一条虚线 .line1{ border: 0; border-bottom: 1px dotted; } 一条可控线段长度与间距的虚线 .line1{ border: 0; padding-top: 1px; background: re...
407
