html5如何让边框发光

html-css013

html5如何让边框发光,第1张

html5让边框发光,就是给那个边框加上一层外阴影,然后使用一个不同于边框的颜色就行了,通过box-shadow来设置,它的一些属性有:X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;阴影模糊半径:此参数可选,,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;阴影颜色:此参数可选。如不设定颜色,浏览器会取默认色,但各浏览器默认取色不一致,特别是在webkit内核下的safari和chrome浏览器下表现为透明色;这里我写一些代码更容易理解:<html> <head><style>#but{width:200px height:200px box-shadow:-10px 0 10px red, /*左边阴影*/ }</style> </head><body> <div id='but'> <p>我是测试文字</p> </div> </body></html>

说起特效来,HTML5还是很值得称道的:

1、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。

2、jQuery球状放大镜特效插件

今天我们要来分享一款基于jQuery的放大镜特效插件,和其他放大镜不同的是,这款jQuery放大镜插件是球状的,看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时,即会出现很酷的球状放大镜,来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小,这就产生了立体感。

3、HTML5 Canvas粒子模拟效果

这是一款利用Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。

4、HTML5/CSS3带区域地图的联系表单

之前我们分享很多样式和功能各异的CSS3联系表单,比如HTML5/CSS3简易联系表单等等,都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单,它可以选中不同区域显示相应的地图,然后针对该区域填写联系表单。

5、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效,他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的,9个小立方体上下浮动,呈现波浪的效果,并且,这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

希望你也可以学起来呀~

学习HTML5需要掌握的知识点知识点有以下几个:

一、HTML5基本组成:

1、HTML5=HTML+CSS+JavaScript

2、HTML指的是结构:结构是在整个网页中有标题、列表、图片等。

CSS是样式:样式是标题文字的字体大小、颜色、字体;图片大小;某个块的背景色或背景图等。

JS是行为:行为是在网页上四处飘动的广告;图片滚动;浏览图片时鼠标移动到图片时,放大缩小图片的效果。

二、容易混淆概念:

1、HTML5移动端的功能和应用程序:

对于苹果手机中的应用程序,属于iOS开发,语言是OC;对于其他安卓系统的手机,需要使用JAVA语言进行开发。HTML5能够做的是移动端的网页以及微信平台中移动端网页。

2、前端后台的区别:

无论HTML5还是iOS,在整个网页开发流程中,前端(HTML5)开发工程师,主要负责的是“前台页面制作”,“网站测试”,“修改”三个部分。

3、HTML5与网页设计与制作的区别:

原有的网页设计与制作,主要针对PC平台,进行网页网站的设计与制作,相对会涉及一部分设计工作,并将美工图实现成网页。通常使用的工具是网页三剑客—Photoshop、Flash、Dreamweaver。

然而,行业的发展使得“网页设计与制作”这一职业逐渐遭到了淘汰。其中原因之一就是网页设计与制作当中的结构实现,通常采用的是table布局;而web前端开发工程师、HTML5当中结构的实现,采用的是DIV+CSS方式的布局,因此,Dreamweaver工具的使用也就没有什么必要性了,取而代之的是内存占用小,开发速度快的文本类编辑器。而Flash在与HTML5的大战中战败,当前已经退出了移动端以及电视平台的市场争夺,在PC平台也越来越少。转言之,Flash在网页制作的领域里已经江郎才尽,原来的网页三剑客只剩下一个ps,在前端工作要求中,需要掌握基本的切图即可。

总结:随着互联网的快速发展,HTML5已经慢慢的渗透到我们的生活中,因此HTML5前景十分光明,需要我们牢牢的抓住机会,通过一些专业的学习后能够在这个行业发光发热。