CSS3.0的一些高级新特性

最新推荐文章于 2023-02-09 22:09:43 发布

寒江蓑笠

最新推荐文章于 2023-02-09 22:09:43 发布

阅读量1.5k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/heqiangflytosky/article/details/8776140

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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); 设置图片边沿发光

寒江蓑笠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3.0的一些高级新特性

1、CSS3.0的一些高级新特性：http://www.cnblogs.com/radom/archive/2012/04/19/2457356.htmlhttp://www.qianduan.net/new-features-of-css3.html1)、WebKit特有属性(1)、-webkit-mask 添加蒙版http://www.qianduan.net/the-
复制链接

扫一扫