如果你平时搜集了一些基本样式，在你写样式的时候就能派上用场。如何用类名定义这些简单的样式，并把他们应用到到各种元素上，这才是最重要的。

 

　　既然如此，今天我们将要探讨一下在开发过程中，需要搜集哪些简单的样式来帮助你从头创建一个网站或是应用程序，这也是今天这篇课程的要点，为此，准备了一段基本样式片段备用。

 

　　在继续往下介绍之前，先解释一下，我是如何搭建他们的。我尝试根据他们的类型进行分类，所以将他们分成“链接”、“输入框”、“普通文本”等等。这样做的主要出发点是“将这些简单的样式可以达到可利用”，这也就是说，为什么用类名来定义这些简单的基本样式。另外，这些样式并不是直接应用到某个元素上，而是用一个非语义化的类名，达到复用性。当然，你也可以根据自己的需要或者项目的需求，给这些基本的样式定义你喜欢的类名，比如说像这样定义：

 

　　。my-class {

 

　　}

 

　　。my-class.custom {

 

　　}

 

　　其实仅定义“。custom”这个类本身并没有太大的意义，但是哪果你把他运用到一个有“my-class”类名的元素上，效果就不一样，你就会发现这个类名会覆盖一些“my-class”类名下的样式。这样的运用，我想你有碰到过。

 

　　这样一来，你现在应该有了一些基本的概念，接下来我们看看这些模式，首先从块元素开始吧。

 

　　注：本教程中运用到CSS3属性时并没有添加任何前缀，但是你在你的样式表中需要添加对应的前缀。

 

　　块元素（Block-level elements）

 

　　也许你在创建一个图片库时，想给这些图片添加一些与众不同的样式，也许你在设计你的博客时，想特别强调你的边栏，也行你在制作你的简历模板时，想让你的照片更漂亮些，那这些都要怎么做呢？想知道就继教往下。

 

　　HTML结构

 

　　在这节中，我给一个“div”元素定义了一个“block-level”的类名，也可以给这个元素添加其他额外的类名。当然只要他是一个块元素你就可以在这个元素上做想要做的事情，比如说，你打算给一张图片应用 这些样式的话，你要先确保他的“display:block”

 

　　<div class="block-level"></div>

 

　　基本样式

 

　　这个demo中，我给这个div应用了几行CSS代码：

 

　　。block-level {

 

　　width: 120px;

 

　　height: 120px;

 

　　margin: 20px;

 

　　position: relative;

 

　　float: left;

 

　　}

 

　　当然，你可以为了需要添加更多的样式，但此处只是为了给一个块元素设置样式，所以只写了几行重要的样式。

 

　　这一节看起来好像有点不知道在说什么？我也看了原文，最后我们翻译想表达的意思是，有些时候你想给一些相同块元素同样的样式的时候，我们可以给元素添加一个相同的类名，并将这些相同的样式运用在这个类名上，如果译得不好，还请高人多多指点

 

　　大漠

 

　　阴影（shadow）

 

　　有时候想要给一个块元素添加稍深一点的不同效果，最好的解决办法是给这个元素添加一点阴影效果。然而，使用阴影效果是件危险的事情，因为没有使用好，他可以轻意的破坏你的设计。如果你不信，可以看看最新的eBay上面的阴影效果。

 

　　最初的想法仅是给每一个块添加一个细微的阴影，而不是如上图所示的一大块的黑影，好像看上去在说“嘿，我在这里！还有这里”，以致于一个阴影破坏了整个设计。

 

　　既然上面的阴影破坏了设计，有什么办法能让阴影显得细微些呢？个人拙见是通过box-shadow的扩散半径的负值给元素添加单边的阴影：

 

　　。drop-shadow {

 

　　background: #9479fa;

 

　　}

 

　　。drop-shadow.top {

 

　　box-shadow: 0 -4px 2px -2px rgba（0,0,0,0.4）

 

　　}

 

　　。drop-shadow.right {

 

　　box-shadow: 4px 0 2px -2px rgba（0,0,0,0.4）

 

　　}

 

　　。drop-shadow.bottom {

 

　　box-shadow: 0 4px 2px -2px rgba（0,0,0,0.4）

 

　　}

 

　　。drop-shadow.left {

 

　　box-shadow: -4px 0 2px -2px rgba（0,0,0,0.4）

 

　　}

 

　　这样下来的阴影效果是不是看上去舒服些呢？

 

　　注：box-shadow的颜色依赖于你的元素背景色，如果你的背景越淡，阴影颜色也就越淡。而且你不能同一个元素添加多个方向的类名，那样后面的就会覆盖前面的，如果你想要给一个元素设置多边阴影效果，你可以创建一个多边的box-shadow。

 

　　接下来，我们来看另外四个box-shadow的示例，这里主要想强调的是，制作一黑色或白色外发光，模糊或不模糊的块元素，这些并不太重要，而重要的是元素的背景是什么？比如说（普通颜色、纹理背景、图片背景等），他们会直接影响一个元素的阴影显示效果。

 

　　div[class*="emphasize-"] {

 

　　background: #69D2E7;

 

　　}

 

　　。emphasize-dark {

 

　　box-shadow: 0 0 5px 2px rgba（0,0,0,.35）

 

　　}

 

　　。emphasize-light {

 

　　box-shadow: 0 0 0 10px rgba（255,255,255,.25）

 

　　}

 

　　。emphasize-inset {

 

　　box-shadow: inset 0 0 7px 4px rgba（255,255,255,.5）

 

　　}

 

　　。emphasize-border {

 

　　box-shadow: inset 0 0 0 7px rgba（255,255,255,.5）

 

　　}

 

　　效果如下所示：

 

　　最后阴影还有两种重要的效果，内浮雕和外浮雕，下面的示例中，第一个是内浮雕，他是一个轻内浮雕，而且仅适用于一个在顶部有非常小的反光效果，第二个相对来说复杂些，使用多层阴影，并且加重单边效果，这个效果一般运用在按钮的制作中。

 

　　div[class*="embossed"] {

 

　　background: #8ec12d;

 

　　color: #333;

 

　　text-shadow: 0 1px 1px rgba（255,255,255,0.9）;

 

　　}

 

　　。embossed-light {

 

　　border: 1px solid rgba（0,0,0,0.05）;

 

　　box-shadow: inset 0 1px 0 rgba（255,255,255,0.7）;

 

　　}

 

　　。embossed-heavy {

 

　　border: 1px solid rgba（0,0,0,0.05）;

 

　　box-shadow:

 

　　inset 0 2px 3px rgba（255,255,255,0.3），

 

　　inset 0 -2px 3px rgba（0,0,0,0.3），

 

　　0 1px 1px rgba（255,255,255,0.9）;

 

　　}

 

　　这一节并不是想向大家介绍如何使用box-shadow的使用方法，而是从细节之处告诉大家，box-shadow使用要细心，不然容易破坏你的整体设计；其二，元素的阴影颜色跟你元素的背景属性有很大的关联性，可以说元素的背景色或背景图片、纹理之类会直接影响元素的阴影效果；第三，在基本样式中为每一种不同的阴影效果定义了一个不同的类名。至少我从这一节中学到了这么几点，不知道你在这节中收获了什么？

 

　　大漠

 

　　渐变（Gradients）

 

　　有时候，你可能想给一个元素添加渐变，这个想法给你带的好处是，只需要修改背景颜色或图片就能达到渐变的效果：

 

　　div[class*="gradient"]{

 

　　background-color: #DEB8A0;

 

　　box-shadow: 0 0 0 1px #a27b62;

 

　　}

 

　　。gradient-light-linear {

 

　　background-image: linear-gradient（rgba（255,255,255,.5）， rgba（255,255,255,0））;

 

　　}

 

　　。gradient-dark-linear {

 

　　background-image: linear-gradient（rgba（0,0,0,.25）， rgba（0,0,0,0））;

 

　　}

 

　　基本上，他就像在Photoshop里的图层一样的简单，从一个透明层到另外一个透明层，这些层都使用在你的一个元素上。上面的线性渐变是比较简单的部分，但径向渐变有时也需要使用到，比如说给元素添加一些光效。其最简单的运用：

 

　　。gradient-light-radial {

 

　　background-image: radial-gradient（center 0, circle farthest-corner, rgba（255,255,255,0.4）， rgba（255,255,255,0））;

 

　　}

 

　　。gradient-dark-radial {

 

　　background-image: radial-gradient（center 0, circle farthest-corner, rgba（0,0,0,0.15）， rgba（0,0,0,0））;

 

　　}

 

　　渐变真是件复杂的事情，至少我每次写渐变我都要看看他的语法。

 

　　圆角（Rounded corners）

 

　　圆角是设计中常见的一个效果，以前写一个圆角，我们需要添加很多个浏览器前缀，现在只需要一个border-radius属性，有了他们，我们是不是看到了曙光，制作圆角并不是件非常痛苦的事情。

 

　　根据设计，直角可以很漂亮或是很糟糕。不管怎么说，你可以给一组元素添加圆角，甚至是小圆角，所以我为他们创建了一些类名

 

　　div[class*="rounded"] {

 

　　background: #fca1cc;

 

　　}

 

　　。light-rounded {

 

　　border-radius: 3px;

 

　　}

 

　　。heavy-rounded {

 

　　border-radius: 8px;

 

　　}

 

　　。full-rounded {

 

　　border-radius: 50%;

 

　　}

 

　　。barrel-rounded {

 

　　border-radius: 20px/60px;

 

　　}

 

　　关于圆角，我自己总结了一套像素尺寸的规格：

 

　　0px没用任何圆角效果；

 

　　1——4px，有一个小圆角效果，多数人分辨不出边缘是否有弧度，只是不会有像直角的锋利感觉；

 

　　5——10px，这里圆角不大不小。根据设计，它可以看上去简单，或者说漂亮

 

　　>10px,大于10px的圆角是一个大圆角

 

　　在你使用圆角属性时，有两个属性值你要记着：

 

　　当你的元素是正方形时，50%的圆角就可以将这个元素变成圆形，如果你的元素是一个长方形，50%的圆角就可以将这个元素变成椭圆形。

 

　　为了实现一个圆角的图标，根据Nina Giorgieva在Twitter中的评论所说，最完美的比例是“6.4”。所以如果你有一个宽度100的正方形，并且你想把它变成一个图标，那你应当给他运用16px的圆角。这个值是根据（100/6.4=15.625）计算得来的。