这篇文章主要介绍“css3前缀实例分析”，在日常操作中，相信很多人在css3前缀实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3前缀实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一 css3简介
css3是css的最新标准.
css3向后兼容早期的css版本.
一些重要的新功能:
border radius:允许我们为元素创建圆角.
border images:允许我们指定一个图像作为元素周围的边框.
multiple backgrounds:将多个背景应用于元素.
动画(animations)和特效(effects),以及更多别的新功能.
box shadow(盒阴影)
使用box-shadow属性,可以通过指定颜色,大小,模糊和偏移来将一个或多个阴影附加到元素.
gradients(渐变)
css3渐变允许我们将元素的背景颜色设置为渐变.有两种类型的渐变可用:线性(linear)和径向(radial).
transform(转换)
通过css3转换,我们可以移动,比例化,反过来,旋转和拉伸元素.通过改变元素的属性来实现一些动画的效果.
animation(动画)
css3中我们可以创建动画,它可以取代许多网页动画图像,flash动画和JavaScripts.
二 css3(浏览器)前缀
css前缀用于区分并兼容各大主流浏览器对于css新功能的支持.
例如,Safari和Chrome的前缀是-webkit.Chrome,Safari和Mozilla目前支持border-radius属性,只要带有浏览器前缀即可生效.
html代码:
<div class="-webkit-border-radius">阳光总在风雨后</div>
css代码:
div.-webkit-border-radius{border:1px solid green; padding:20px; margin:20px; -webkit-border-radius: 24px ; }
效果如下:
通过添加前缀,能使css样式在不受支持的浏览器中生效.有时候为了兼容更多的浏览器,你可能需要对同一个样式属性进行重复定义增加不同的前缀.
每个浏览器对应的前缀如下::
firefox -moz-
safari -webkit-
chrome -webkit-
opera -o-
ie -ms-
● 为了使样式能够兼容各种浏览器,前缀的写法可能较为重复,但这只是短暂的.随着浏览器的不断改进,会逐渐兼容所有新样式.这样就可以不需要使用前缀写法来兼容了.
三 css3圆角
通过border-radius属性可以给任何元素设置"圆角"
html代码:
<div class="border-radius">读书多了,容颜自然改变</div>
css代码:
div.border-radius{border-radius:20px;background-color:green;color:white; margin:20px; }
到此，关于“css3前缀实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
