芯学苑 web前端开发中常用的CSS3有哪些新特性

html-css016

芯学苑 web前端开发中常用的CSS3有哪些新特性,第1张

CSS3实现圆角(border-radius),阴影(box-shadow),

对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

在CSS3中唯一引入的伪元素是::selection.

媒体查询,多栏布局

border-image

CSS3 使用border-radius属性设置圆角效果

该属性可以通过设置图片或块级元素四个角的圆角半径像素数来实现该效果。W3C规定该属性的可能取值为:

none,默认值,表示元素没有圆角效果

length,由浮点数字和单位标识组成的长度值

%,由百分比设置的圆角值

该属性可以分别设置元素的四个圆角效果,采用下列格式来实现。

格式:border-radius: 左上角 右上角 右下角 左下角

通常,四个方向的角半径均采用length取值来实现,该取值必须为浮点数字和单位标识共同组成。同时规定,该取值不得取负数。

例1:利用整数来实现圆角取值。

div{

width: 200pxheight: 150px

border: solid 1px #aaaaaa

border-radius: 10px 5px 10px 5px

background-color: #ff5857

}

上述实例设置了一个div块级元素,其宽度为200px,高度为150px。为了能够看到其圆角效果,增加了颜色为#ff5857的背景颜色,并且添加了1px大小的边框,其边框为实线,边框颜色为#aaaaaa。最后设置其圆角效果,左上角和右下角均为10px,右上角和左下角均为5px。

例2:查看下列CSS代码。

(1)border-radius: 10px 5px 15px 20px

(2)border-radius: 10px 5px 15px

(3)border-radius: 10px 5px

(4)border-radius: 10px

上述四组代码中,只有组(1)提供了完全符合格式的四个数据,其他三组均只提供了小于四个的数据。这种情况下,数据依然按照“左上角 右上角 右下角 左下角”的顺序进行排列,没有涉及到的角方向按照其对角的圆角数据进行设置。

因此,组(2)的数据表示:左上角为10px,右上角为5px,右下角为15像素,左下角为右上角的像素设置,即5px。请同学们根据这样的方法,理解一下组(3)的圆角含义。

组(4)就设置了一个数据,这表示四个方向的角半径均为10px。

二、独立设置元素的四个圆角效果:

若只想设置一个块级元素右上角的圆角效果,该如何实现呢?这里W3C为border-radius属性派生出了表示四个方向的独立圆角效果的子属性。

border-top-left-radius, 定义左上角的圆角效果

border-top-right-radius, 定义右上角的圆角效果

border-bottom-right-radius, 定义右下角的圆角效果

border-bottom-left-radius, 定义左下角的圆角效果

上述四个子属性的取值规则和border-radius属性的取值规则是完全相同的。

例3:设置p标记的圆角效果,其中左下角没有圆角效果,其他三个方向角的圆角效果均为25px。

方法1:利用border-radius属性统一设置。

p{border-radius: 25px 25px 25px 0}

方法2:利用border-radius属性的派生子属性设置。

p{

border-top-left-radius: 25px

border-top-right-radius: 25px

border-bottom-right-radius: 25px

}

方法3:利用border-radius属性设置所有角方向均为25px,再利用border-radius属性的派生子属性设置左下角没有圆角效果。

p{

border-radius: 25px

border-bottom-left-radius: none

}

html5

html5是万维网发布的最新语言规范,做web前端,精通html5是必须要掌握的一项技能。

CSS3

CSS3的语言开发是朝着模块化发展的,这些模块包括盒子模型、列表模块、文字特效和多栏布局等,CSS3对于Web前端整个页面的设计是必备的技能。

java

java是一种直译式的脚本语言,是一种动态类型、弱类型,基于原型的语言,内置支持类型,掌握了java,你就可以给你的网页增加各种不同的动态效果。

JQuery

JQuery是轻量级的JS库,它兼容CSS3,JQuery能够使用户更方便的处理html,实现动画效果,更方便的为网站提供AJAX交互。

AJAX

一旦UI设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。实现网站交互必须熟练掌握AJAX。

BootStrap

BootStrap是基于 HTML、CSS、Java 的,它简洁灵活,使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。

以上关于web前端工程师必备的web前端技术六大技能。