CSS3学习ing

CSS3样式。

1. 边框

1.1 圆角效果:
　　border-radius: 10px /* 所有角都使用半径为10px的圆角 /
　　border-radius: 5px 4px 3px 2px; / 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */
1.2边框阴影:
　　box-shadow:x轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
1.3为边框应用图片:　
　　border-image:url(xxx.jpg) 70 70 70 repeat

img

2. 颜色

2.1颜色:
　　color:rgba(R,G,B,A)
2.2颜色渐变:
　　background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

　　

img

3.文字与字体:

3.1　text-overflow

　　

img

　　(须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果)

3.2　word-wrap
　　文本行为，当前行超过指定容器的边界时是否断开转行。

　　

img

3.3嵌入字体
　　@font-face {
　 font-family : 字体名称;
　 src : 字体文件在服务器上的相对或绝对路径;

　　 }
3.4 文本阴影
　　text-shadow: X-Offset Y-Offset blur color;

4.背景

background-origin:border-box | padding-box | content-box;
　　background-clip: border-box | padding-box | content-box | no-clip
　　background-size: auto | <长度值> | <百分比> | cover | contain
　　multiple backgrounds

5.选择器

注意事项：
border-width 不支持百分比。默认3px。