Visor 隐藏应用之一 CSS3 生成器

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 去尝试一下。