css3学习总结二
第二章 气泡对话框
学习word-wrap属性，用来容纳溢出的文本。取值normal（默认）或break-word
text-wrap是控制词间如何折行。
使用border-radius实现圆形（椭圆）
要绘制一个正圆，得给盒容器指定相同的width和height值，要用em代替px作为尺寸来确保它可以根据文字量等比扩大。然后，将每个边角的border-radius的尺寸设置为width/height的一半。
备注：使用border-radius属性时并不是必须指定边框样式，如果没有边框则浏览器只为背景区域绘制圆角。
border-radius是用来分别指定圆角半径的四个属性的简写形式。这四个属性是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。
border-radius除了用在气泡对话框之外还可以用在按钮，标签栏，对话框，圆形标记，柱状图，表情图。
但是这一个圆角在ie8以及ie8之前的版本是不支持的。只能显示成直角。
利用边框做出三角形要素：将一个元素的width和height设置为0，然后为它设置较粗的边框，并将其中三个边框的颜色设为透明。还可以为相邻边框设置不同的边框宽度来改变三角形的角度。
用css生产一段内容，需要用:before和:after伪元素来指定内容将被插入的位置，并用content属性设置内容本身
插曲有个Unicode编码转换器，地址是http://rishida.net/tools/conversion/
content:"\00a0";content后面的代表空格。
Unicode代码点能够被content属性所用的只能是紧跟在前缀之后的有四位数组成的十六进制编码。
利用RGBA或HSLA实现半透明背景
RGBA值的是“红色、绿色、蓝色和Alpha透明度” 前三个参数取值为（0-255），最后一个取值为0-1（完全不透明）
HSLA代表“色调、饱和度、亮度和Alpha透明度” 色调（0-360），饱和度和亮度（0%-100%）
备注：css3仍有opacity属性，但是他的作用是是整个元素都半透明，包括前景内容，不仅仅是背景。
色彩转换器：http://serennu.com/colour/hsltorgb.php
取色器：www.workwithcolor.com/doughnut-color-picker-01.htm
应用：
可以将阴影投射于背景之上。按钮或任何其他物件的高光渐变。为导航栏中当前所选的链接着上臂同色调更亮或更暗的颜色。
照片上的半透明标题框。悬浮于内容上方的半透明对话框、模态窗和提示栏
background-color：hsla(4%,76%,0.5) border-color：transparent hsla(4%,76%,0.5) transparent transparent;
针对ie的兼容的方案：使用Gradient（渐变）滤镜，ie5.5就支持了。可以指定半透明的颜色。将起止色设置为同一种颜色即可避免产生渐变。
.ie6 blockquote, .ie7 blockquote { /* IE 5.5, 6, 7 */
background: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99E3F4EE, endColorstr=#99A6DADC);
zoom: 1;
}
99E3F4EE前两位代表Alpha透明度。值从00到ff
除了加上滤镜之外，我们还在ie7及之前版本的规则里重置了背景色，因为他会覆盖滤镜的颜色。对ie6之前的的版本，要触发haslayout状态来使滤镜得以正常工作，我们用zoom:1;来完成此工作。
ie8无需移除背景色，无需触发haslayout状态。他的语法如下：
.ie8 blockquote {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99E3F4EE, endColorstr=#99A6DADC)";
}
无图实现色彩渐变
线性渐变（linear/straight gradients）和径向渐变（radial/circular/elliptical gradients)
可以在任何接受图片值的属性中使用linear-gradient或radial-gradient函数来实现渐变效果。
用法：
实现渐变只需指定两种颜色。其余的值可选，不设置则为默认值。
若不为颜色指定位置和渐变角度，渐变从顶到底。
函数的第一个值里指定渐变的起始点，取值可为center，数字，负值，若用数字，第一个值代表x多远处开始，第二个代表y多深处
指定起始点后可以指定角度，从水平到渐变线的逆时针角度。0deg左到右，90deg下到上，180deg右到左，270deg上到下
每个颜色区间都至少包含一个颜色值。
可以用background-size控制尺寸，background-repeat控制是否平铺
例子： background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0) 30px);
background-image: -webkit-gradient(linear, 0 0, 0 30, from(hsla(0,0%,100%,.6)), to(hsla(0,0%,100%,0)));
http://westciv.com/tools/gradients来这里粘贴复制就可以。
另一个模拟渐变效果的方法是：box-shadow 盒状阴影
例子： -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); /* Opera, IE 9 */
该属性中，需要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色，还可以选择性的设置模糊半径（blur radius）和扩展半径（spread radius）
第一个值代表水平移动，第二个值代表垂直移动，第三个值是模糊半径0是锐利。顺序不能变
box-shadow生成器：http://westciv.com/tools/boxshadows
应用：发光效果，3D效果的按钮，为盒容器模拟多层边框。
ie8及之前版本不支持。
文字阴影
text-shadow用法和box-shadow几乎完全相同。
应用：发光文字（http://desando.com/articles/the-new-lens-flare）,镂空文字，火焰文字，模糊文字。
生成器：http://westciv.com/tools/shadows
变形
transform属性
translate（20px,-10px)取正值是向右，下方移动。将物体移动到新的位置
rotate正数值是顺时针方向，将物体旋转x角度
scale（2,1.5）或scale（2.5）物体变小取值0到1
skew物体按x角度发生倾斜 skew（10deg,20deg)
生成器：http://westciv.com/tools/transforms
例子：.comment-meta img {
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.ie8 .comment-meta img {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455)";
position: relative;
top: -5px;
left: -5px;
}
.ie6 .comment-meta img，.ie7 .comment-meta img{
filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.9961946980917455, M12=0.08715574274765817, M21=-0.08715574274765817, M22=0.9961946980917455);
position: relative;
top: -5px;
left: -5px;
}
浙公网安备 33010602011771号