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
2. 颜色
2.1颜色:
color:rgba(R,G,B,A)
2.2颜色渐变:
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
3.文字与字体:
3.1 text-overflow
(须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果)
3.2 word-wrap
文本行为,当前行超过指定容器的边界时是否断开转行。
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。