Visor 有很多隐藏功能，这些功能并不是系统的核心功能，只是为了测试一些技术，做了些对初学前端的工程师还算有用的功能。今天就介绍一下CSS3 生成器。
先介绍一下Note 组件：
Note是基本图形部件的一个组件。由于Visor是一个基于HTML5的图形设计器，所以Note也可以实现需要HTML5的一些特效，我们可以通过设置Note的属性，来获得一个视觉效果，再通过下一段介绍的CSS Style Template将整个CSS的实现逆向生成出来提供给用户使用。
Note常用的属性：
边距：指代内部文本距离外框的边距padding
旋转：当前的这个容器按顺时针旋转的角度
宽：整个容器的宽度
高：整个容器的高度
Note的外观属性：
文字设置：能够设置字体的样式，颜色，大小，以及是否为粗体、斜体，是否填充。
背景选择：可以选择背景的样式。颜色，渐变，图片
边框效果的设置：可以对边框进行颜色，阴影以及是否为圆角的设置。
文本段落的设置：文本段落见得行间距以及对齐的效果
下边介绍一下 Css Style 模板
Css Style模板是使用一个前端的技术JSRender所实现的，它通过分析Note的属性，获取其中的信息来进行解析，最后自动化的实现一个Css的代码。
在我们设计好了Note后，通过点击右方的模板，就能够逆向的生成一个CSS的代码。用户能够使用自己设计的CSS效果放在自己想要的容器中。
1.设计个性化的容器note
点击模板
就生成了CSS代码
生成的CSS 应用到DIV上可以产生和note 一样的效果。
有兴趣的朋友可以访问 http://www.visor.com.cn 去尝试一下。
posted on
