CSS3.0的一些高级新特性

来源:互联网 发布:java 字符串转义函数 编辑:程序博客网 时间:2024/04/19 23:17

1、CSS3.0的一些高级新特性:

http://www.cnblogs.com/radom/archive/2012/04/19/2457356.html
http://www.qianduan.net/new-features-of-css3.html

1)、WebKit特有属性

(1)、-webkit-mask 添加蒙版

http://www.qianduan.net/the-future-of-css-experimental-css-properties.html

(2)、-webkit-text-stroke 为文字添加边框

h3 {color: transparent;-webkit-text-stroke: 4px red;}

(3)、-webkit-box-reflect 倒影效果

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>reflect倒影效果</title><style> img{width: 200px;     -webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 20%,rgba(0,0,0,0.6) 100%);}</style></head><body>    <img src="1.jpg" alt="" /></body></html>

http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120126165232714/

(4)、-webkit-nbsp-mode 设置文字断行

(5)、-webkit-tap-highlight-color 只有iOS(iPhone和iPad)才支持;

(6)、-webkit-margin-collapse 设置两个相邻的元素的margin

(7)、-webkit-marquee 设置一段来回滚动的文字

(8)、-webkit-box-shadow: 0px 0px 20px rgba(255,0,0,0.8);   设置图片边沿发光 

2)、其他

(1)、text-overflow 防止位置超出容器而溢出

(2)、word-wrap 自动换行

(3)、-webkit-border-radius/-moz-border-radius 圆角

(4)、border-top-image
    border-right-image
    border-bottom-image
    border-left-image
    border-corner-image:
    border-top-left-image
    border-top-right-image
    border-bottom-left-image
    border-bottom-right-image 边框

(5)、-webkit-column-width -webkit-column-gap 多栏

(6)、box-shadow: 0px 0px 20px rgba(255,0,0,0.8); 设置图片边沿发光