9种超实用CSS技巧帮助设计师和开发者

一个网页设计师脑子里一定会被大量与他的工作有关的知识填满。而说到CSS，它可以帮助对网站进行设计，让设计具有更多的可能性，用更简单的方式让你的网站更具吸引力，而使用传统的技术这些方面并不容易面面俱到。
对于前端，页面而言，CSS的确是一门首选需要掌握的技能。
以下就是9种非常实用的CSS3属性和使用技巧，
1. 圆角效果
谈及圆角小编曾在各种讨论中频繁听见：实现麻烦、兼容困难、性能不佳等等缺点。而如今的Web设计需要的就是各种各样新的开发技巧，因此越来越多的前端和页面都开始使用HTML5。
对于HTML5而言，从前必须使用图片来实现的需求，现在都可以通过代码来实现。而CSS3中加入的“border-radius”就可以用通过它来直接定义HTML元素的圆角，并支持所有浏览器的最新版本。
我可以通过如下代码实现：

border-radius： 10px; /* CSS3 Property */
-moz-border-radius： 10px; /* Firefox */
-webkit-border-radius： 10px; /* Chrome/Safari */
-khtml-border-radius： 10px; /* Linux browsers */

我们也可以使用下面这样的组合版本，或者用它来对上面的代码进行速记。

-moz-border-radius： 10px 20px 30px 0;

而IE浏览器对CSS3属性支持，可以从这篇英文文章进一步了解。
2. 阴影效果
另一个CSS3可实现的有趣功能是阴影效果（box-shadow），通过“box-shadow”可以非常简单的实现该功能。我们常见的主流浏览器都支持这个属性，而Safari浏览器支持可选加前缀的-webkit-box-shadow属性。
代码包括：

#myDiv{
-moz-box-shadow： 20px 10px 7px #ccc;
-webkit-box-shadow： 20px 10px 7px #ccc;
box-shadow： 20px 10px 7px #ccc;
}

而如下的JavaScript代码也能实现同样的阴影效果：

object.style.boxShadow=“20px 10px 7px #ccc”

3. @Media属性
@Media可以直接指定应用样式引入媒体属性，用于相同样式针对不同屏幕尺寸的网页风格变化， 它也有助于响应式网页设计中的造型变化。通过简单的修改如下代码就能实现。

@media screen and （max-width： 480px） {
}

而使用如下的@media print甚至可以指定CSS的打印预览：

@media print
{
p.content { color： #ccc }
}

4. 添加一个渐变填充
在CSS3中的渐变效果是另一个让人惊叹的属性。它目前还未得到全部浏览器的支持，因此最好不要完全依赖它来设置布局。而这里有一个基于CSS的梯度导航栏可以让大家参考一下。
以下是实现的方式。

background： -webkit-gradient（linear， left top， left bottom， from（darkGray）， to（#7A7A7A））;

5. 背景尺寸
背景尺寸（Background size）是CSS3中最实用的效果之一，目前很多浏览器都已经支持。Background size属性可以让你随心所欲的控制背景图的尺寸大小。
从前用于背景的图像大小在样式中是不可调整的，如果你无法想象那样有多么糟糕，可以试着回忆一下，在自己的电脑桌面上做壁纸的时候遇到一张合乎心意却偏偏与桌面尺寸不合的图片，只能通过平铺来填充。
那样的桌面丑的让一个审美观及格的人都会有砸屏幕的冲动。而现在我们可以通过改变一行代码让背景图片适应自己的页面。