HTML5开发APP如何解决CSS3视觉辅助方法详解_博纳网络深圳网站建设公司

当前位置：

发布时间：2019-07-30

文章编辑：网站建设文章来源：APP开发浏览量：次

HTML5开发APP如何解决CSS3视觉辅助方法详解，深圳APP开发公司提醒CSS随着Web2.0的出现和发展，以往的特性和标准已经无法完全满足现今的交互和需求，开发者需要更强的字体选择、更方便的阴影渐变、更简单的图形动画。随之而来的就是CSS3的到来，在不需要改变原有设计结构的情况下，就可以使用最新的特性，做到良好的向后兼容。
不过目前支持的浏览器有限，很大一部分新功能在使用时都需要添加浏览器前缀，给开发使用带来了一定的困难。本章将从背景、文字效果、边框、用户界面、转换和过渡6个性能点来介绍CSS3。
HTML5开发APP关于CSS3的变化
CSS3让原有的网站更加趣味盎然，很多站点都给自己的网站页面添加了各种酷炫的CSS3效果，让网站变得更加吸引人，如大众点评网的十周年活动页面（网址为http://www.dianping.com/userevent/ten/tm/1），效果如图7.1所示。

图7.1中箭头所指区域均使用了CSS3动画效果，用到了@keyframes和animation样式功能。读者可以继续向下滚动页面查看更多的CSS3动画效果。这里推荐一个CSS3的体验网站（网址为http://beta.theexpressiveweb.com/），上面通过CSS3制作的动画生动地介绍了HTML5和CSS3的新特性。

开发APP关于背景（Backgrounds）
在CSS2.1中background属性已经出现，并且拥有以下5个属性：
background-color：背景色。
background-image：背景图片地址，相对或者绝对位置。
background-repeat：是否及如何重复背景图像，默认为repeat表示图像将在垂直方向和水平方向重复。
background-attachment：背景图像是否固定或者随着页面的其余部分滚动，默认为scroll表示随着页面的其余部分滚动。
background-position：背景图像的起始位置。在CSS3中又给background添加了3种属性，下面分别进行介绍。

1．background-originbackground-origin用于设置或检索对象的背景图像计算background-position时的参考原点（位置），共有3种可选值：padding-box表示从padding区域（含padding）开始显示背景图像，border-box表示从border区域（含border）开始显示背景图像，content-box表示从content区域开始显示背景图像。通过background-origin示例比较3种属性，使用Chrome浏览器打开backgound-origin.htm文件，效果如图7.2所示。图7.2　background-origin示例效果图

2．background-clipbackground-clip用于指定对象的背景图像向外裁剪的区域，同样具有3种可选值：padding-box表示从padding区域（不含padding）开始向外裁剪背景，border-box表示从border区域（不含border）开始向外裁剪背景，content-box表示从content区域开始向外裁剪背景。通过background-clip示例比较3种属性，使用Chrome浏览器打开backgound-clip.htm文件，效果如图7.3所示。

3．background-sizebackground-size用于检索或设置对象的背景图像尺寸大小，允许用长度或者百分比指定背景图片大小，不允许使用负值。通过background-size示例可以比较各种写法。使用Chrome浏览器打开backgound-size.htm文件，效果如图7.4所示。

另外，CSS3还支持Multiplebackgrounds，即多重背景图像，可以把不同背景图像只放到1个块元素里。多个图片URL之间使用逗号隔开，如果有多个背景图片，而其他属性只有1个（例如background-repeat只有1个），就表明所有背景图片都应用该属性值。通过Multiplebackgrounds.htm示例学习如何使用Multiplebackgrounds，效果如图7.5所示。