Stunning CSS3 读书笔记: 第二章 气泡对话框

　　从本章开始，就进入需要动手实践的阶段了。

 

　　注意：本文中的实例效果均非效果图片，推荐使用新版的非IE浏览器，或IE9+浏览器浏览本文，否则可能无法查看到最佳效果。

 

　　本章中，作者通过实现和优化气泡对话框的样式，逐步阐述了以下的CSS特性：

• 　　word-wrap
• 　　border-radius
• 　　HSLA色彩模式
• 　　linear-gradient
• 　　box-shadow
• 　　text-shadow
• 　　transform

　　

　　1.包裹长文本：

 

　　在包裹文本的元素中，如果用户输入很长的文本，特别是URL，浏览器并不会自动折行，这会导致文本溢出。

　　例如：

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　如上所示的div中的URL就溢出到外面，而不会自动换行。

　　为了解决这个问题，我们需要用到word-wrap属性，来强制浏览器进行词内折行。

　　

div{
word-warp: break-word;
}

 

　　修改后的效果如下:

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　

 

　　2.无图的图形效果：

 

　　在CSS3之前，如果想要实现圆角效果，必须要使用图片，还要嵌套额外的div。

　　图片以及臃肿的页面结构和CSS增加了访客的下载负担，也影响着页面读取的速度。

　　在CSS3中实现圆角只需要给div指定border-radius属性即可，无需额外的标签，无需图片，无需Javascript。　

　　

div{
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}

 

　　以上代码中，border-radius: 20px；这句是实现圆角的W3C标准语法 ，它指定所有四个圆角的半径是20像素。

　　浏览器支持度如下：

 

IE	Firefox	Opera	Safari	Chrome
支持，9+	支持，需要-moz-前缀	支持	支持，5+; 4+需要-webkit-前缀	支持

 　　

　　

　　实现的效果如下：

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　IE8及之前版本的浏览器中看到的还是直角，既然是一个纯粹的装饰效果，根据第一章中的“渐进增强”思想，书作者认为IE用户看不到它也并无大碍。

　　

　　3.制作三角形

 

　　我个人认为制作三角形是一个必要有用的技巧，使用三角形与其他样式结合，做出很多效果。

　　制作三角形需要用到一个div，代码如下：

 

div{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 20px;
border-color: red green blue orange;
}

 　　

　　以上代码的效果如下：

 

 

　　

　　通过以上代码，我们就得到了四个拼接在一起的三角形。接下来，我们把上、左、下边框的颜色改为透明，看会发生什么。代码如下：

　　

div{
width: 0;
height: 0;
border-style: solid;
border-width: 10px 20px 10px 20px;
border-color: transparent green transparent transparent;
}

 

　　

　　没错，我们得到了一个三角形。

　　

 

　　

　　

　　5.内容生成

 

　　要使用CSS来生成一段内容，需要用 :before 和 :after 伪元素来指定内容被插入的为位置，并用content属性设置内容本身。

　　通过以上几点，我们现在就有能力给对话框增加一个小尾巴了。代码如下：

　　

div{
position:relative;
}

div:after{
content:"\00a0";
display:block;
position:absolute;
top:20px;
left:-20px;
width:0;
height:0;
border-style:solid;
border-width:10px 20px 10px 0;
border-color:transparent #e2eff9 transparent transparent;
}

 

　　

　　我们就得到了一个圆角框+一个三角形。

 

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　

　　

　　6.无图实现色彩渐变

 

　　Firefox及W3C语法：background-image: -moz-linear-gradient(hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, 0) 30px);

　　Webkit语法:background-image: -webkit-gradient(linear, 0 0, 0 30, from(hasla(0, 0%, 100%, 0.6)), to(hsla(0, 0%, 100%, 0)));

　　效果如下：

　　

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　

　　

　　7.无图实现盒装阴影

　　

　　为了实现立体化，我们还可以给气泡对话框加上阴影。

　　CSS3里，使用box-shadow实现盒容器的阴影。代码如下：

　　

div{
-moz-box-shadow: 1px 1px 2px #888;
-webkit-box-shadow: 1px 1px 2px #888;
box-shadow: 1px 1px 2px #888;
}

 

 　　  其中：第一个值表示相对与盒容器的水平偏移，第二个值是垂直偏移。

　　   　　  第三个值表示模糊半径，更大的值会使阴影更模糊更朦胧。

　　　　　  第四个值是阴影的颜色。

　　 通过增加阴影，我们得到如下结果：

　　

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

　　

　　

　　8.无图实现文字阴影　

　　

　　文字可以通过text-shadowd属性实现阴影。

　　它的语法和box-shadow一样。

　　参考如下代码:

　　

div{
text-shadow:1px 1px 0 hsla(0, 0%, 100%, .7);
}

 

　　得到的效果如下，其得到的效果并不起眼，但依旧值得去做，加上文字阴影会使文字更为醒目。

 

I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: http://www.cnblogs.com/techlulu/archive/2012/06/21/2558228.html

 

　　

　　9.变形

 

　　变形是一些效果的结合，每个效果都被称作变形函数(Transform Function)。它们可以操作盒容器发生旋转、缩放、倾斜等变化。使用纯 CSS实现这些变形不仅提升了你的开发效率，还提升了页面本身的执行效率。

　　参考如下代码：

　　

　　

img{
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}

 

 

　　旋转调用的变形函数是rotate，旋转的度数单位是deg。

　　以上代码实现的功能是让图片逆时针旋转5度。

　　效果如下:

　　

　　

 

 

 

　　到此，本章所有涉及到的CSS属性就都回顾完了，感谢收看。

　　

　　

　　

转载于:https://www.cnblogs.com/techlulu/archive/2012/06/23/2559271.html