12 2016 档案

[CSS揭秘]不规则投影
摘要：难点 普通元素添加border-radius所生成的形状添加box-shadow的效果都非常完美。但是当普通元素添加了伪元素或者半透明的装饰之后，box-shadow就会有点力不从心。因为boder-radius会无耻地忽视透明部分。 场景: 1. 半透明图像，背景图像，border-image 2 阅读全文
posted @ 2016-12-20 00:38 小碎石 阅读(343) 评论(0) 推荐(0)
[CSS揭秘]规则投影
摘要：背景知识 box-shadow 第三个参数是模糊半径，使用高斯模糊算法进行模糊处理。本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模糊半径的两倍。 第四个参数是扩张半径，会根据指定的值扩大或者缩小投影的尺寸。宽度和高度分别扩张或者减少两倍的扩张半径。 单侧投影 如果给一个负的扩张半 阅读全文
posted @ 2016-12-20 00:00 小碎石 阅读(164) 评论(0) 推荐(0)
[CSS揭秘]伪随机背景
摘要：大自然中的事物都不是以无限平铺的方式存在的，如果想让事物营造一种自然随机性，那么就需要使用一种伪随机的技巧。 当你注意到一个有辨识度的特征在以固定的规律循环重复时，那么它视图营造的自然随机性就会立刻崩塌。 如何产生一种真实的随机条纹呢，这就需要先了解什么叫做最大公倍数以及质数。 如果有多层图案，并且 阅读全文
posted @ 2016-12-19 23:01 小碎石 阅读(508) 评论(0) 推荐(0)
[CSS揭秘]复杂的背景图案
摘要：这一篇是接着上一篇[CSS揭秘]条纹背景来继续讲解CSS渐变的强大之处 背景知识 linear-gradient radial-gradient repeating-linear-gradient repeating-radial-gradient 使用CSS渐变创建任何种类的几何图案几乎都是可能的 阅读全文
posted @ 2016-12-19 22:27 小碎石 阅读(285) 评论(0) 推荐(0)
[CSS揭秘]条纹背景
摘要：背景知识 线性渐变 linear-gradient 不管是线性渐变，还是径向渐变。它们都是用来设置元素的背景图像。 background-image属性可以为一个元素设置一个或者多个背景图像。这些图像在绘制过程中，以Z方向堆叠的方式进行，也就是先指定的图像会在后指定的图像上面绘制，也就越接近用户。元 阅读全文
posted @ 2016-12-19 00:15 小碎石 阅读(285) 评论(0) 推荐(0)
[CSS揭秘]连续的图像边框
摘要：背景知识：border-image, gradient, 多重背景，CSS动画 背景知识讲解 1. border-image 边框应用背景图片，图片会自动被分割为四等分，分别用于四个边框。使用border-image属性时，会替换掉border-style属性设置的边框样式。如果boder-imag 阅读全文
posted @ 2016-12-18 22:03 小碎石 阅读(169) 评论(0) 推荐(0)
[JavaScript语法学习]全面介绍Number
摘要：JavaScript中的Number对象是经过封装的能够让你处理数字值的对象，Number对象是由Number()构造器创建的 语法 new Number(value); 属性 方法 Number.isNaN(value) (ES6新增) 用来检测传入的值是否为NaN,返回布尔值. 因为NaN==N 阅读全文
posted @ 2016-12-11 21:39 小碎石 阅读(271) 评论(0) 推荐(0)