HTML5技术

5个CSS3技术实现设计增强 - jerrylsxu(3)

字号+ 作者:H5之家 来源:博客园 2016-05-09 14:00 我要评论( )

background-image : url (astro- 127531.png ) ; background-image : url (astro- 127531.png ) , url (Hubble- 112993.png ) ; background-repeat : no-repeat ; background-position : bottom left ; background-

background-imageurl(astro-127531.png);
background-imageurl(astro-127531.png),url(Hubble-112993.png);
background-repeatno-repeat;
background-positionbottom left;
background-positionbottom lefttop right;

css3-实例教程

“买五送一”-旋转任何元素

目前支持的浏览器:Apple Safari 4+, Firefox 3.5+, Google Chrome 1+

虽然它目前不算是CSS3中的一部分,但Webkit已经有了它自己的一套变形属性,Mozilla也在效仿。变形包含了很多不同类型的值,不过其中最有意思也是最有用的就是旋转了。

1
2

webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);

css3-旋转变形

下图为不支持CSS3的浏览器所呈现出来的样子(如Opera 9):

css3-兼容性

查看实例Demo(需要使用Safari 4+, Firefox 3.5+, or Chrome 1+浏览器)

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • CSS3 选择器 - Glunefish

    CSS3 选择器 - Glunefish

    2017-04-22 09:00

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

  • .NET插件技术-应用程序热升级 - 把爱延续

    .NET插件技术-应用程序热升级 - 把爱延续

    2017-04-20 12:01

网友点评
<