初学CSS3应该掌握哪些基础知识2

作者:日期:2017-02-26 23:33:45 点击:151

 

css3中新增字体

在网页编辑使用字体时,在CSS3出现之前设计师只能使用计算机已安装的字体,而现在CSS3中,当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。

那么如何使用CSS3字体呢,我们可以看一下这篇文章。 
CSS3 字体和CSS3 新增控制字体属性

边框

边框圆角

圆角处理时,脑中要形成圆、圆心、长半径、短半径的概念,正圆是椭圆的一种特殊情况。

可分别设置长、短半径,以“/”进行分隔,遵循“1,2,3,4”规则,参考手册练习熟悉各种简写方式。

表格运用圆角需要要 border-collapse: separate; 
当圆角半径小于或等于边框宽度时,元素内角是直角

边框阴影

设置边框阴影不会影响盒子的布局,即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值

可以设置多重边框阴影,实现更好的效果,增强立体感。

背景

背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

cover 会使“最大”边,进行缩放,另一边同比缩放,铺满容器,超出部分会溢出。

contain 会使“最小”边,进行缩放,另一边同比缩放,不一定铺满容器,会完整显示图片。

background-size会以background-clip设定的盒模型计算

背景图片尺寸在实际开发中应用十分广泛。

渐变

渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变、重复渐变。

线性渐变指沿着某条直线朝一个方向产生渐变效果。

径向渐变指从一个中心点开始沿着四周产生渐变效果

关于圆的知识同边框圆角章节的介绍

转换

转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

2D 转换

详细请点击css3 2D转换transform

translate(x,y) x、y 可为负值,相对自身移动,并未脱离文档流。

左手坐标系:伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。

3D转换

详细请点击css3 3D转换 transform 
左手法则:左手握住旋转轴,竖起拇指指向旋转轴正方向,正向旋转方向就是其余手指卷曲的方向。

3D坐标轴,用X、Y、Z分别表示空间的3个维度,三条轴上互相垂直。

兼容性

通过caniuse.com可询CSS3各特性的支持程度,一般兼容性处理的常见方法是为属性添加私有前缀,如不能解决,应避免使用,无需刻意去处理CSS3的兼容性问题。

上一篇: 初学CSS3应该掌握哪些基础知识

下一篇: CSS3实现居中的各种方式