传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

C3新特性


常见的面试官问法:
  • 你用CSS3实现过哪些动画,如何实现?
  • 你做过的那些CSS3的效果啊?
  • 你知道CSS3里面的盒模型不?
  • 说说你对伸缩布局是怎么了解的?......
  • 你能解释一些CSS3中的文本效果么?(text-shadow:文字阴影,word-warp:自动换行。)


对于这些等等问题,我们只有背和记忆,以及对应我们平时的案例讲解!这.... {:8_471:}

     以下重点掌握标红的部分!!{:8_486:}

1、浏览器私有前缀
谷歌(苹果):webkit
火狐:-moz-
欧朋:-o-
IE:-ms-

2、CSS3介绍
CSS3是CSS2“进化”版本
优点:新增了一些特性,使得web开发变得高效便捷。
缺点:  1、浏览器支持程度差,需要添加私有前缀
2、移动端支持优于PC
3、不断改进中

3、新增选择器
属性选择器
伪类选择器
伪类目标:target
伪类空:empty
伪类:not
伪元素选择器
::before
::after

4、文字阴影
text-shadow:2px 1px 3px #ccc;

5、边框
边框圆角
border-radius:2px 3px 6px 4px;
边框阴影
border-shadow:1px 2px 3px #ccc;

6、边框背景图片
border-image:
设置的图片将会被“切割”成九宫格形式,然后进行设置
round和repeat的区别
round会自动调整尺寸,完整显示边框图片
repeat 单纯平铺多余部分,会被“裁切”而不能完整显示。
更改裁切尺寸
background-slice: 34 36 27 27

7、盒子模型
游客,如果您要查看本帖隐藏内容请回复

8、透视
概念
通过屏幕2d平面,通过一种视觉呈现,显示3d的效果。必须给父元素设置
属性
perspective
值越小离眼睛越近反之越大
perspective有两种写法
作为一个属性,设置给父元素,作用于所有3D转换的子元素
作为transform属性的一个值,做用于元素自身 并且写在最前面

9、3D呈现(transform-style属性)
概念:设置内嵌的元素在 3D 空间如何呈现,这些子元素必须为变形原素。
浏览器默认:flat:所有子元素在 2D 平面呈现
perserve-3d:preserve-3d:保留3D空间

10、立方体案例
六个面旋转
先旋转,后位移
位移都是z轴
定位
通过定位,使得div脱离标准流,在旋转的同时,坐标轴也发生变化。
旋转:当六个面旋转完成了,还要对整个立方体盒子旋转。
加入3d效果:transform-stylepreserve-3d

11、动画
游客,如果您要查看本帖隐藏内容请回复

12、颜色
游客,如果您要查看本帖隐藏内容请回复

13、渐变
线性渐变
linear-gradient():指向一个方向产生渐变
注意:1.方向 2.开始颜色2.终止颜色3.距离
径向渐变
radial-gradient:指从中心向四周渐变
注意:1.渐变半径(半径可以不等) 2.渐变圆心(中心位置参照的是盒子的左上角) 3. 开始颜色 4. 终止颜色
好处:css3中渐变绚丽的效果,减少在网页中图片的使用

14、过渡
祯动画
补间动画
效果:实现元素不同状态间的平滑过渡
特点:当前元素只要有“属性”发生变化时,可以平滑的进行过渡。
过渡属性
transition-property:设置过渡属性
transition-duration:设置过渡持续时间
transition-timing-function:设置过渡速度
transition-delay:设置过渡延时

15、伸缩布局
游客,如果您要查看本帖隐藏内容请回复

16、背景
属性
background-size设置背景图片的尺寸
可以设置长度单位或百分比
设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。
设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
background-origin设置背景定位的原点
border-box以边框做为参考原点
padding-box以内边距做为参考原点;
content-box以内容区做为参考点;
background-clip设置背景区域裁切
border-box裁切边框以内为背景区域
padding-box裁切内边距以内为背景区域;
content-box裁切内容区做为背景区域;
注意:背景图片尺寸在实际开发中应用十分广泛

17、3D 转换
透视
perspective:1000px
3D效果
transform-style:preserve-3d;
属性
移动
translate(x,y,z
旋转
rotate(Xdeg,Ydeg,Zdeg)
倾斜
skew(deg,deg)
缩放
scale(0-1)

18、2D  转换
属性
移动
translate(x,y
旋转
rotate(deg)
倾斜
skew(deg,deg)
缩放
scale(0-)
transform:转换
transform-origin:转换原点
分享至 : QQ空间
收藏

109 个回复

倒序浏览
沙发
回复 使用道具 举报
回复 使用道具 举报
内容不错,提前了解下内容
来自宇宙超级黑马专属苹果客户端来自宇宙超级黑马专属苹果客户端
回复 使用道具 举报
css3css3css3css3css3css3css3css3
回复 使用道具 举报
111111111111111111111
回复 使用道具 举报
看一看瞧一瞧
回复 使用道具 举报
撒按时按时
回复 使用道具 举报
看一看瞧一瞧
回复 使用道具 举报
1111111111111
回复 使用道具 举报
谢谢楼主
回复 使用道具 举报
     盒子模型
回复 使用道具 举报
不错,看看盒子模型
回复 使用道具 举报
111111111111111111111111
回复 使用道具 举报
盒子模型的原理
回复 使用道具 举报
盒子模型的理解
回复 使用道具 举报
123341234 来自手机 初级黑马 2017-8-16 23:42:22
17#
123432313131
回复 使用道具 举报
沙发是什么鬼
回复 使用道具 举报
谢谢分享
回复 使用道具 举报
hello world
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条