日期:2014-05-17  浏览次数:20603 次

CSS3.0常用的新属性

?圆角边框?-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;?

?

?

-moz-border-radius 兼容firefox ?

-webkit-border-radius 兼容webkit引擎的浏览器,一般都是mac上的

同时也可以给每个角设定圆角边框值,比如 border-top-left-radius就是左上角

?

box阴影:-moz-box-shadow:5px 5px 5px #191919;-webkit-box-shadow:5px 5px 5px #191919;box-shadow:5px 5px 5px #191919; ?div p h 等等这些都可以有圆角边框

?

文字阴影 ??x-offset, y-offset, blur,和 color. ?

x-offset ?小于0则向左偏移相应的值,y-offset 小于0是向上偏移,blur是模糊值,值得一提的是一个元素有多个阴影时,会有颜色渐变的效果。

?

RGBA ?background:RGBA(255,255,255,0.5) ?依次对应的是红绿蓝和透明度,有浮动层的时候用到会比较好看。

?

TEXT-OVERFLOW??可以将超出的文字用....代替,也可以设置当鼠标划过的时候显示超出文字,这样就不用额外的写一个浮动层了。

?

Text-overflow
.box {
-o-text-overflow: ellipsis;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border: 1px solid black;
width: 400px;
padding: 20px;
cursor: pointer;
}
鼠标划过时显示全部文字文字
#box:hover {
white-space: normal;
color: rgba(0,0,0,1);
background: #e3e3e3;
border: 1px solid #666;
}

?

?

暂时写到这