CSS3学习笔记
一,兼容性
在编写CSS3样式时,不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。
前缀 浏览器 -webkit chrome&safari -moz firefox -ms IE -o opera
二,边框
1,圆角效果 border-raidus
border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-raidus:2px 3px 4px 5px; /*四个半径值分别是左上,右上,右下,坐下,顺时针*/
实心圆方法:
border-raidus:10px;/*元素宽高均为10px*/
2,阴影 box-shadow
box-shadow:4px 2px 6px #333333;
4px:x轴偏移量 必须有,水平方向,允许负值
2px:y轴偏移量 必须有,垂直方向,允许负值
6px:[阴影模糊半径] 可选,模糊距离,值越大越模糊,>=0
未写:[阴影扩展半径] 可选,阴影的尺寸,值可正负
#333333:[阴影颜色] 可选,缺省为黑
未写:[投影方式] 可选,inset为内阴影,缺省为外阴影
多个阴影用逗号隔开。
三,颜色
1,rgba:
color:rgba(r,g,b,a)/*a为透明度,取值0~1*/
2,颜色渐变:
background:linear-gradient(to bottom ,#fff,#999);
linear-gradient:渐变类型
to bottom:渐变方向,还可以为:to top,toleft,toright,to top left,to top right
#fff:起始颜色
#999:终止颜色
颜色值可以放多个,在起始和终止之间
四,文字、文本
1,实现文本溢出时用(......)表示:
text-overflow:ellipsis;/*溢出时的表示方式,此处为用省略号表示,还可以为clip(剪切)*/ overflow:hidden;/*溢出内容隐藏*/ white-space:nowrap;/*强制文本在一行内显示*/
2,文本阴影:text-shadow:X-offest Y-offset blur color;
X-offest :水平方向,正右负左
Y-offset :垂直方向,正下负上
blur :模糊值,>=0,
color :阴影颜色,可使用rgba
3,引入本地字体:@font-face
@font-face { font-family : 字体名称; src : url(字体文件在服务器上的相对或绝对路径); }