psd 自动css_使用CSS3P轻松将PSD转换为CSS3-CSDN博客

Photoshop不仅是照片编辑的流行选择，还是设计网站的不错选择。前面我们已经向您展示了如何使用Photoshop设计博客布局。通过一系列效果和功能，Photoshop允许我们使用阴影，圆角，内部发光，外部发光，纹理以及其他使网站看起来引人入胜的效果来组成视觉效果丰富的演示文稿。

但是，问题出在我们要将这些繁重的效果转换为CSS3时。将每一种效果转换为CSS3确实是一项非常繁琐的任务。如果您遇到此问题，我们希望本技巧可以对您有所帮助。

使用CSS3P

此插件可用于Photoshop CS3以及最新的CS6，在撰写本文时，它支持以下转换（将来会添加更多功能）。

Photoshop效果或对象	CSS3属性
对象大小	`height`和`width`
具有边界半径的形状	`border-radius`
中风	`border`
内发光，外发光，阴影和内阴影	`box-shadow`
文本	`font` ， `text-transform` ， `text-decoration`和`color` 。

此外，CSS3P还添加了供应商前缀，以实现跨浏览器的兼容性。

对于此演示，我们将按照以下屏幕快照中的指示，从Premium像素处的此PSD转换以下透明对象。

该插件易于使用。只需为对象选择相应的层，然后单击CSS3Ps栏，如下所示。

然后，我们将重定向到生成输出CSS3Ps网页。在我们的例子中，输出如以下片段所示。

结果很聪明，将不透明度效果从RGBA格式转换为Alpha通道。

controls base
{
  width: 500px;
  height: 40px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background-color: rgba(34,36,38,.9);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  box-shadow: 0 1px 3px rgba(0,0,0,.7), inset 0 2px rgba(255,255,255,.15);
  border: solid 1px #000;
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.35), rgba(255,255,255,.35));
  background-image: linear-gradient(to top, rgba(0,0,0,.35), rgba(255,255,255,.35));
}