整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
randomColor是一个生成随机颜色的JavaScript脚本，对于写代码的我们来说，生成一个随机颜色或许并不复杂，但是想要生成一个比较吸引人的随机颜色可能是需要花费一番功夫的，但如果已经有人实现了这样一个小功能，那么我们直接使用即可，不需要再花费心思研究那么深，一起来看看吧！
randomColor已移植到C＃，C ++，Go，Haskell，Mathematica，PHP，Python，Swift，Perl6，Objective-C，Java，R，Reason和Rust。
https://github.com/davidmerfield/randomColor
本文只是简单介绍下在浏览器中使用，我相信在Web开发中使用的还是最多的，我们可以直接使用cdn或者下载脚本下来直接引入：
var color=randomColor();要在服务器上使用带有node.js的randomColor，请从npm安装randomColor，然后调用脚本：
var randomColor=require('randomcolor'); // 引入
var color=randomColor(); // 16进制可以传递配置对象以便于产生特定的结果出来：
hue ——控制生成的颜色的色调。可以传代表颜色名称的字符串：当前支持红色，橙色，黄色，绿色，蓝色，紫色，粉红色和黑白（red, orange, yellow, green, blue, purple, pink 和 monochrome）。如果您传递十六进制颜色字符串（例如＃00FFFF），则randomColor将提取其色相值并使用该值生成颜色
luminosity——控制所生成颜色的亮度。您可以指定一个包含亮，亮或暗的字符串（bright, light or dark）。
count——指定要生成的颜色数
seed 一个整数或字符串，该整数或字符串在传递时将导致randomColor每次返回相同的颜色。
format ——指定生成的颜色的格式。可能的值为rgb，rgba，rgbArray，hsl，hsla，hslArray和hex（默认值）。
alpha ——介于0和1之间的十进制数。仅当使用带有alpha通道的格式（rgba和hsla）时才相关。默认为随机值。
// 返回具颜色的十六进制代码
randomColor();
// 返回十个绿色的数组
randomColor({
count: 10,
hue: 'green'
});
// 返回浅蓝色的十六进制代码
randomColor({
luminosity: 'light',
hue: 'blue'
});
// 返回“真正随机”颜色的十六进制代码
randomColor({
luminosity: 'random',
hue: 'random'
});
// 返回RGB的明亮的颜色
randomColor({
luminosity: 'bright',
format: 'rgb' // e.g. 'rgb(225,200,20)'
});
// 返回带有随机alpha的深色RGB颜色
randomColor({
luminosity: 'dark',
format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});
// 返回具有指定alpha的深色RGB颜色
randomColor({
luminosity: 'dark',
format: 'rgba',
alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});
// 返回带有随机Alpha的浅色HSL颜色
randomColor({
luminosity: 'light',
format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});randomColor是一个小型JavaScript脚本，虽然功能不多，但是针对颜色这一块还是非常值得使用的，对于大多数场景已经完全够用！enjoy it！
浏览器前缀的简介及应用
某些CSS属性还只是最新版的预览版，并未发布成最终的正式版，而大部分浏览器已经为这些属性提供了支持，但这些属性是小部分浏览器专有的;有些时候，有些浏览器为了扩展某方面的功能，它们会选择新增的一些CSS属性，这些自行扩展的CSS属性也是浏览器专属的。为了让这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。
文本阴影属性语法及应用
说明：水平、垂直阴影的位置允许负值 可进行多阴影设置
文本换行的相关属性
Word-wrap
属性值：
normal
说明：只在允许的断字点换行(浏览器保持默认处理)
break-word
说明：属性允许长单词或 URL 地址换行到下一行。
属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
Word-break
属性值：
break-all
说明：它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接进行单词内的断句
Keep-all
说明：文本不会换行，只能在半角空格或连字符处换行。
@font-face
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体(@font-face这个功能早在IE4就支持)
@font-face的语法规则：@font-face {
font-family: < YourWebFontName >;
src: < source > [< format >][,< source > [< format >]]*;
[font-weight: < weight >];
[font-style: < style >];
}
@font-face语法说明：
1、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;
3、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等;
4、weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。
实例：@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
CSS3 背景的新增属性
1、Background-origin 背景原点
说明：指定background-origin属性应该是相对位置属性值：padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
注：默认值为：padding-box;
2、Background-clip 背景裁切
说明：background-clip 属性规定背景的绘制区域。属性值：border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框
。
注：默认值：border-box;
3、Background-size 背景尺寸
说明：background-size 规定背景图像的尺寸属性值：length
规定背景图的大小。第一个值宽度，第二个值高度。
Percentage(%)
以百分比为值设置背景图大小
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
4、css3多背景属性
Eg:p{ background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景，第一个最上面
background-color:yellow; //这是定义的默认背景颜色，全部适合 }
CSS3 颜色特性
1、rgba 颜色模式
2、 Hsl 颜色模式(了解)
3、 Hsla 颜色模式(了解)
CSS3 边框的新增属性
1、border-color
EG:border-color:red green #000 yellow;(上右下左)
2、border-image
border-image 属性是一个简写属性，用于设置以下属性:
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
border-image-outset 边框图像区域超出边框的量
3、Border-radius 圆角边框
(1).box{ border-radius: 5px 10px 20px 50px }
(2).div1{border-radius: 2em/1em}
以斜杠/分开后面的参数:
第一个参数表示圆角的水平半径，第二个参数表示圆角的垂直半径
(3).div1{ border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径，但是通常我们很少写右边的参数，那就是默认右边等于左边的值。
4、box-shadow 盒子阴影
属性值：
Eg:box-shadow: 10px 10px 5px #888888
5 新特性
1、拖拽释放(Drap and drop) API ondrop
拖放是一种常见的特性，即抓取对象以后拖到另一个位置
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
2、自定义属性 data-id
3、语义化更好的内容标签(header,nav,footer ,aside, article, section)
4、音频 ,视频(audio,video) 如果浏览器不支持自动播放怎么办?
在属性中添加 autoplay
5、画布 Canvas
（5.1）getContext()
方法返回一个用于在画布上绘图的环境Canvas.getContext(contextID)参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API
（5.2）cxt.stroke() 如果没有这一步 线条是不会显示在画布上的
（5.3）canvas 和 image 在处理图片的时候有什么区别?
image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.
6、 地理(Geolocation) API
7、本地离线存储 localStorage 长期存储数据 浏览器关闭后数据不丢失
8、sessionStorage 的数据在浏览器关闭后自动删除
9、表单控件 calendar ,date , time , email , url , search , tel , file , number
10、新的技术 webworker,
websocket , Geolocation
CSS3 新特性
1、颜色: 新增 RGBA , HSLA 模式
2、文字阴影(text-shadow)
3、边框: 圆角(border-radius) 边框阴影 : box-shadow
4、盒子模型: box-sizing
5、背景:background-size
background-origin
background-clip
6、渐变: linear-gradient , radial-gradient
7、过渡 : transition 可实现动画
8、自定义动画 animate
@keyfrom
9、媒体查询 多栏布局
@media screen and (width:800px) {…}
10、border-image
11、2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
12、3D 转换
13、字体图标 font-face
14、弹性布局 flex
*请认真填写需求信息，我们会在24小时内与您取得联系。
