标签：
这是一篇CSS3教程 http://www.maiziedu.com/course/228/，主要讲述在不使用图片的情况下如何使用CSS3 创建图像效果。
使用渐进增强的开发方式，因此一开始的界面只要拥有基本样式即可。基本的评论区界面样式如下：
现在我们来逐步完善这个博客的评论区域。
word-wrap
当用户在评论区留下一长串的 URL 时，有可能会出现以下情况。
此时需要使用 word-wrap，使用 word-wrap 的原因是基于 Webkit 内核的浏览器以及 IE 在遇到”/“时并不会自动换行，且所有主流浏览器遇到“_”也不会自动换行，因此需要使用 word-wrpa 属性赋值为 break-word。这个属性允许文本在词内断开。
|
1 2 |
word-wrap: break-word;
|
border-radius
通过设置 border-radius 实现圆角效果。使用 CSS3 属性即可，减少对图片的依赖，加快用户访问速度。设置时需要注意浏览器的支持：
|
1 2 3 4 |
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
|
利用边框创建图形效果
平常在使用边框的时候，我们往往只是对边框的宽度，颜色以及边框样式进行设置，但是边框还有一种使用方法。仔细观察下面图片：
可以看到个方向的边框在交界处会呈现一个特殊的交界线，因此实现以下代码会出现如下效果：
|
div { border-color: red green blue orange; border-style: solid; border-width: 20px; width: 0; height: 0; }
|
在此基础上通过调整各边框的颜色以及宽度即可生成一个小三角形图标。
::before 和 ::after
某些情况下我们希望通过 CSS 生成一些不重要但能美化界面的内容，此时就可以使用伪元素 ::before 和 ::after 指定内容的插入位置。比如我们希望给页面上的每个图片标题都增加“（图）”这个前缀，此时你可以使用以下的 CSS：
|
1 2 3 4 |
.caption::before { content:“（图）” }
|
结合上面提到的边框创建图形效果，CSS 代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
blockquote::after { content: "\00a0"; display: block; position: absolute; top: 20px; left: -20px; width: 0; height: 0; border-width: 10px 20px 10px 0; border-style: solid; border-color: transparent #A6DADC transparent transparent; }
|
目前我们的博客评论区界面如下：
利用 RGBA 或者 HSLA 实现半透明背景
在 CSS3 中，我们可以使用下面两种方法设置颜色。
RGBA，即“红色、绿色、蓝色和 Alpha 透明度”
前三个参数的取值为 0 ~ 255 或者 0% ~ 100%
最后一个参数取值为 0 ~ 1
HSLA，即“色调、饱和度、亮度和 Alpha 透明度”
第一个参数的取值为 0 ~ 360
第二和第三个参数的取值为 0% ~ 100%
最后一个参数取值为 0 ~ 1
以上两种方法都可以设置背景的透明度，但是需要注意的是，opacity 属性的作用是使得整个元素的透明度发生变化，而不仅仅是背景。
使用背景透明的效果：
|
1 2 |
background-color: hsla(182,44%,76%,.5);
|
使用 opacity 透明的效果：
box-shadow
无需使用图片，秩序通过设置界面的阴影效果，可以增强界面的立体感。增加以下 CSS 代码：
|
1 2 3 4 |
-moz-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); -webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); box-shadow: 1px 1px 2px hsla(0,0%,0%,.3);
|
box-shadow 参数含义：
第一个值表示相对于盒容器的水平偏移
第二个值表示垂直偏移
第三个值表示模糊半径，指定有多少像素的阴影被拉伸
第四个值是阴影的颜色
配合伪类 :hover 增强立体感
增加下面的 CSS 代码：
|
1 2 3 4 5 6 7 8 |
blockquote:hover { top: -2px; left: -2px; -moz-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); -webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); }
|
当鼠标在文本框上方悬停时，通过改变阴影偏移量营造一种动态的感觉，增强立体感。
同样的，也可以通过 text-shadow 给文字添加阴影效果。但这些阴影效果不应该滥用，否则只会起到反面效果。
transform
transform 属性是 3D 变形模块的一部分，常见的 transform 属性有以下几个：
translate，移动位置
scale，缩放元素
rotate，旋转元素
skew，倾斜元素
我们来给用户头像进行旋转：
|
1 2 3 4 5 6 |
.comment-meta img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }
|
原文来自：技术学习小组
标签：