介绍:CSS3是css技术的升级版,于1999年开始制定,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型,列表模型,超链接方式,语音,背景,多栏等.
css3的新特性:
1.选择器 2.阴影 3.形状转化 4变形 5过渡动画 6帧动画 7边框 8多重背景 9反射
10文字效果 11颜色 12滤镜 13弹性布局 14多列布局 15盒子模型 16web字体 17媒体查询
CSS3兼容介绍:
浏览器内核:Trident:IE内核 Webkit:chrome和Safari内核 Gecko:Firebox内核 Blink:Chrome老内核
兼容处理 IE:-ms- chrome:-webkit- Firebox: -moz- Opera: -o-
css3选择器:
1.属性选择器
例:P[class] {}
指定p中所有含class属性的标签
补充: class=""指定内容 class^ 指定开头 class$指定结尾 *指定含有
2.结构伪类选择器
2.1:root 匹配html标签 同(body)
2.2 :first-child:第一个子元素
2.3:last-child 最后一个子元素
通 nth-last-child or nth-child 第几个子元素
3.连续与不连续选择器
nth-of-type:不连续
4.其他选择器
only-child:选择仅有一个子元素的父元素
only-of-type:仅一个兄弟元素
empty:空元素
注:还有很多种选择器 ,选择器的多样选择可以让css拥有更强大的样式处理能力,更快的解决页面设计的问题.
css3的文本与边框
1.文本阴影
1.1h-shadow(水平偏移) v-shadow(竖直偏移)
1.2模糊度
2.边框阴影
2.1圆角边框
例: borders-radius: 1-4 (length/%)||
边框阴影box-shallow(h,v,o,c)
可以用于解决顶部或重叠内渐变问题
css3的渐变与变形问题
1.线性渐变
background:linear-gradient(方向or角度,颜色1,颜色2)
2.径向渐变
redial-gradient(形状,大小,位置,颜色1,颜色n)
3.变形
3.1.2D变形
translate(x,y) 沿xy移动元素
translatex 单参数 沿x移动/y
scale 缩放
skew 倾斜转化
rotate 转换角度
3.2.3D变形
perspective 透视效果
transform-style:呈现嵌套效果
transition 过渡动画
timing-function 动画函数
css3种的弹性布局(最重要的布局手段之一)
Css3弹性盒:可以适应不同的屏幕与设备显示
初始化父元素:display:flex/inline-flex
关键作用:可以让子集块级元素排列在一行上//
5.1.flex-diretion 指定子元素在父元素种的位置
属性值:row(左) row-reverse(右) column(纵向对齐)
5.2.ustify-content 沿主轴对齐
flex-start(左) end(右) center(居中) space-between(除第一个和最后一个等分) around(全等分)
5.3.align-items 设置子元素在纵轴上的 布局
baseline沿基线对齐 stretch拉伸对齐
5.4 flex-grow 放大比例
