CSS3是CSS的最新版本,它为网页开发者提供了更多的皮毛特效和样式来优化他们的网站。在CSS3中,有许多新的属性,这些属性可以让网页设计师实现更多的特效,比如圆角、阴影、渐变色和动画效果。
CSS3中与以往版本相比最大的改进是引入了新属性-可以轻松实现圆角效果,这个属性叫“border-radius”。为了实现圆角效果,你可以把这个属性赋予一个元素,绑定想要的角度数值,然后直接就能看到效果了。
border-radius:5px 10px 15px 20px;
接下来,CSS3添加的另一个有用的属性是“box-shadow”。box-shadow可以让你给元素添加阴影效果。box-shadow可被用于许多不同的元素上,比如文本、图片和按钮。以下是CSS3 box-shadow代码示例:
box-shadow: 5px 5px 10px rgba(0,0.2);
CSS3中另一个值得注意的新功能是“渐变效果”,即gradient。这个功能允许你在不同的元素背景中添加渐变效果。这个属性很灵活,可以被应用到任何元素上。
background: linear-gradient(to bottom,#00ccff 0%,#0099cc 100%);
最后值得一提的是“@font-face”属性,他可使你可以添加任何自定义字体到你的网页。要使用“@font-face”,你需要为所有的浏览器提供至少两个不同的文件格式,比如.ttf和.eot。
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* For IE6-8 */ src: url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.woff2') format('woff2'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'),url('webfont.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; }
以上是CSS3中一些新的特性和属性,使用它们会让网页更有吸引力和更优美。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。