CSS3----新增特性及其在主流浏览器中的兼容性

最新推荐文章于 2025-07-04 23:15:00 发布

ll_xiaohanqing_91

最新推荐文章于 2025-07-04 23:15:00 发布

阅读量901

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端之CSS 文章标签： CSS3新增特性多栏布局

本文链接：https://blog.youkuaiyun.com/ll_xiaohanqing_91/article/details/51055620

WEB前端之CSS 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS3新增的各种特性，包括新的选择器、RGB透明度设置、多栏布局、多背景图片支持、字符串溢出处理、块阴影与文本阴影效果、圆角样式、边框图片应用以及2D形变等。这些新特性使网页设计更加丰富且无需额外加载图片，提升了用户体验和页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 选择器：IE6.0及以下不兼容，其它主流浏览器都兼容

新增的属性选择器：

    [att^='value'] ：属性 att 的值以指定值value开始
    [att$='value']：属性 att 的值以指定值value结束
    [att*='value']：属性 att 的值包含指定值value，而无论其位置

新引入连字符的兄弟选择器：

如：div ~ img{.....} 选择特定的 div 标签的同级的所有图片

2. RBGA透明度：IE系列全不支持，Weskit核心系列、Firefox 3+ 和Opera 9.5+支持

    background: rgba(255, 0, 0, 0.5 )     : 最后一个参数表示透明度</span>

rgba的透明度只影响指定元素，而Opacity还会影响到指定元素的子元素

3. 多栏布局: Webkit核心系列和Firefox 2+支持

在Webkit核心系列浏览器(safari、chrome等)中使用时，加'-webkit' 前缀

    -webkit-column-count : 3 ;     分栏总数
    -webkit-column-gap : 1.5em ;     栏之间的间距
    -webkit-column-rule : 1px solid #999 ; 栏间分割线

在Firefox览器中使用时，加'-moz' 前缀

 -moz-column-count : 3 ; 
 -moz-column-gap : 1.5em ; 
 -moz-column-rule : 1px solid #999 ;

4. 多背景图片

 background: url(a.jpg) top left no-repeat , url(b.jpg) top right no-repeat , url(c.jpg) bottom right no-repeat ,url(d.jpg) bottom left no-repeat ;

5. 字符串溢出

word-wrap: break-word or normal /*防止太长的字符串溢出  normal:只允许在断点截断文字，如连字符 ；break-word 强制换行 */

6. 块阴影和文本阴影

-webkit-box-shadow: 2px 2px 10px #ccc/*块阴影*/
text-shadow:10px 10px 20px #06C/*文本阴影*/

7. 圆角

border：1px solid #333;
-webkit-boder-top-right-radius : 20px;
-webkit-boder-top-left-radius : 20px;</span>

8. 边框图片

-webkit-border-image: url(b.jpg) 124/*124为边框宽度*/

9. 形变：各浏览器都支持的属性

-webkit-transform : rotate(5deg);/*2D旋转，倾斜5度*/  /*要先声明-webkit-transform-origin  如：-webkit-transform-origin:0 2px*/
-webkit-transform : scale(1.00, 1.50);/*2D伸缩，第二个参数默认与第一个参数一样*/
-webkit-transform : skew(1.5, 1.5);/*斜切变换，第二个参数默认为0*/
-webkit-transform : translate(5px, -2px);/*2D translation 第二个参数默认为0*/

10. 总结
CSS3新增的样式可以使用户更加快速地访问互联网：不需要图片也能实现某些很酷的效果，不会影响浏览器的加载速度；更容易被搜索引擎搜索