13518219792
本文小编为大家详细介绍“css3前缀是什么”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3前缀是什么”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
创新互联公司一直在为企业提供服务，多年的磨炼，使我们在创意设计，全网营销推广到技术研发拥有了开发经验。我们擅长倾听企业需求，挖掘用户对产品需求服务价值，为企业制作有用的创意设计体验。核心团队拥有超过十余年以上行业经验，涵盖创意，策化，开发等专业领域，公司涉及领域有基础互联网服务成都服务器托管、手机APP定制开发、手机移动建站、网页设计、网络整合营销。
一 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代码:
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代码:
css代码:
div.border-radius{border-radius:20px;background-color:green;color:white; margin:20px; }
border-radius属性可以通过(左上角,右上角,右下角,左下角)的顺序进行设置.
css代码:
border-radius:0 0 20px 30px;
border-radius的属性值也可以是百分比.
●通过将元素的border-radius属性设置为元素高度以及宽度的一半可以将圆角设置变成圆形.
示例中矩形元素的宽度和高度均为200px.通过将border-radius设置为150px,矩形元素将变成圆形.
html代码:
css代码:
div.border-radius3{width:200px; height:200px; border-radius:100px; background-color:green; color:white; text-align: center; margin:30px;}
四 css3阴影
box-shadow属性可以我元素增加阴影效果.
box-shadow属性使用时,必须按顺序设置
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:必需,水平阴影的位置.允许负值.
v-shadow:必需,垂直阴影的位置.允许负值.
blur:可选,模糊距离.
spread:可选,阴影的尺寸.
color:可选.阴影的颜色.
inset:可选,将外部阴影(outset)改为内部阴影.默认为outset.
html代码:
css代码:
div.box-shadow{width:300px; height:100px; background-color:#9ACD32; box-shadow:10px 10px #8888888; margin:30px; }
除了颜色(color)外,box-shadow元素还有两个可选值,它们是模糊(blur)和扩展(spread)
负值也可以用于box-shadow中:
h-shadow:阴影将在框的左侧
v-shadow:阴影将在框的上方.
blur:不予许使用负值
spread:负值会导致阴影缩小.
读到这里，这篇“css3前缀是什么”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
