CSS3新增了哪些属性
CSS3新增的属性有：1、文本阴影；2、背景渐变；3、颜色透明度；4、元素旋转；5、多列布局；6、字体改变等等。
本文操作环境：Windows7系统、Dell G3电脑、css3版。
今天将和大家介绍CSS3中的新增属性，具有一定的参考价值，希望对大家有所帮助
最新版本的CSS3的出现使Web设计更容易，虽然并非所有浏览器都支持它。但是由于技术上的迅速变化，CSS3的模块化的规范化使目前所有浏览器都在实施完整的CSS3支持，相信不久之后CSS3以及HTML5 将成为网络的未来，接下来将在文章中和大家详细介绍CSS3中的新功能
浏览器兼容问题：
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
【推荐课程：CSS3教程】
CSS3文字阴影
<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>
CSS3 背景渐变效果
CSS3中线性渐变属性到目前为止仅在Safari 4和Chrome和Firefox 3.6中受支持。
<div style="width:200px;height:100px; background-color: #1a82f7; background-repeat: repeat-x; background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "></div>
CSS3 颜色效果
现在具有不透明度
rgb在CSS中是用来设置元素的颜色的但在CSS3中新增了一个可以设置颜色不透明度的操作，rgb已转换为rgba，这简化了控制元素不透明度的方式。
<div style="width:50px;height:50px;background-color:rgba(123,123,123,0.4);"></div>
CSS3转换（元素旋转）
CSS3新引入了transform属性用以旋转元素
<div style="width:50px;height:50px;background-color: pink;-webkit-transform:rotate(40deg); ">旋转</div>
CSS3多列布局
在网页布局上每个网页都需要被分为列，并加以调整使其适合不同的浏览器，CSS3中使用的多列布局属性只需要指定所需列数然后创建它们
column-count 属性规定元素应该被分隔的列数
div.content{
width:210px;
border:1px solid #ccc;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:25px;/*列之间的间隔*/
-webkit-column-rule:1px solid #ccc;/*规定列之间的宽度、样式和颜色规则*/
}
</style>
</head>
<body>
<div class="content">
php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
</div>
CSS3 Web字体
CSS3还可以在网页上嵌入任何自定义字体，原本字体依赖于客户端系统，网页只能呈现浏览器或客户端计算机支持的字体，但是通过使用@font-face属性，您可以使用其他位置上的字体
@font-face
{
font-family: myFirstFont;
src: url(Sansation-Italic.ttf)
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>WWWWWW</div>
总结：以上就是本篇文章的全部内容了，希望对大家了解CSS3的新属性有一定的帮助。
以上是CSS3新增了哪些属性的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
纯CSS3怎么实现波浪效果？（代码示例）
Jun 28, 2022 pm 01:39 PM
纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！
css怎么隐藏元素但不占空间
Jun 01, 2022 pm 07:15 PM
两种方法：1、利用display属性，只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素，只需给元素添加“position:absolute;top:-9999px;”样式。
css3怎么实现花边边框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
原来利用纯CSS也能实现文字轮播与图片轮播！
Jun 10, 2022 pm 01:00 PM
怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
css3如何实现鼠标点击图片放大
Apr 25, 2022 pm 04:52 PM
实现方法：1、使用“:active”选择器选中鼠标点击图片的状态；2、使用transform属性和scale()函数实现图片放大效果，语法“img:active {transform: scale(x轴放大倍数,y轴放大倍数);}”。
css3动画效果有变形吗
Apr 28, 2022 pm 02:20 PM
css3中的动画效果有变形；可以利用“animation:动画属性 @keyframes ..{..{transform:变形属性}}”实现变形动画效果，animation属性用于设置动画样式，transform属性用于设置变形样式。
css3怎么设置动画旋转速度
Apr 28, 2022 pm 04:32 PM
在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。
