CSS 用于控制网页的样式和布局,而CSS3 是最新的 CSS 标准。
CSS3的规范仍在开发中,有些CSS3并不能完美兼容所有浏览器。
CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。
一些最重要CSS3模块如下:
选择器 盒模型 背景和边框 文字特效
2D/3D转换 动画 多列布局 用户界面
CSS3选择器
添加了关系型选择器、属性选择器、伪元素选择器、伪类选择器等等新的选择器。
可以更精准的筛选元素。CSS3选择器
CSS3边框
CSS3中可以为元素创建圆角边框,添加阴影框。
CSS3圆角
语法:border-radius: 25px 25px 20px 20px;
可以拆分为:左上 / 右上 / 右下 / 左下
border-top-left-radius / border-top-right-radius / border-bottom-left-radius / border-bottom-right-radius
CSS3盒阴影
语法:box-shadow: 10px 10px 10px 10px #000;
X Y s r color
可加上inset属性,加上则为内部阴影,没加则为外部阴影
CSS3图片边框
语法:border-image: url( ) 30 30 round;
CSS3背景
css3中包含了新的背景属性,提供更大背景元素控制。
background-image属性:元素的背景图片
语法:background-image: url(),url()可连接多个图片地址,如果前一个地址错误或者无法加载,会加载后面的地址。
也可以为不同的图片设置不同的属性:background-image: url() right bottom no-repeat , url() left top repeat;
backrgound-size属性:元素的背景图片的大小
语法:background-size: 80px 60px;
background-Origin属性:可以指定背景图片的位置区域
语法:background-Origin: padding-box;内填充
border-box;边框
content-box;内容
background-clip属性:对图片从指定位置进行裁剪
语法:background-clip: 值同上;
在文字中添加背景图:
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
CSS3 Flex Box 弹性盒子
弹性盒子是CSS3的一种新的布局模式
弹性盒子由弹性容器和弹性子元素组成。
弹性容器内包含了一个或多个弹性子元素。
用法:
display:flex; //inline-flex
flex-direction: row | row-reverse / column | column-reverse
主轴以x为准,|取反 主轴以y为准,|取反
flex-wrap: 默认no-wrap不换行,会压缩;
wrap换行 warp反向换行排列
justify-content: flex-start / flex-end / center / space-between / space-around
基于主轴的对齐方式
基于交叉轴的对齐方式:
适用于单行的:align-items:flex-start / flex-end / center / baseline / stretch
适用于多行的:align-content:flex-start / flex-end / center / space-between / space-around / stretch
如果只有一行是没有区别的
order: flex中子项排序,数值小的排序在前。
align-self :项目在交叉轴的对齐方式:
flex-start交叉轴最顶 flex-end最底
center baseline stretch 比前两者优先级更高。
flex: 子项,以下控制宽
flex-grow : ; 伸,会按照写的比例来瓜分剩下的空间,写在多个标签内会一起计算比例,不写默认值为0
flex-shrink : ; 缩,按照比例缩小按比例分配的值
flex-basis : ;基础宽,可以认为即width。最小宽度,width为最大宽度。
以加权值来计算,在容器宽不足以容纳子项,以每个项目的宽*比例值相加后,按照比例缩小。
CSS的过渡属性 transition 只要状态发生改变,就会触发过渡
transition-property--规定设置过渡效果的 CSS 属性的名称。all 为全部属性
transition-duration--规定完成过渡效果需要多少秒或毫秒。
transition-timing-function--规定速度效果的速度曲线。
transition-delay--定义过渡效果何时开始。
CSS的动画属性 animation 必须使用@keyframes
@keyframes--定义关键帧动画,名字随便取,调用的时候用这个名字即可
animation-name--动画的名字,必须与@keyframes配合使用
animation-duration--动画的时间,从0 - 100 的时间
animation-timing-function--动画的方法:
steps(<integer>[, [ start | end ] ]?) step-start:等同于 steps(1, start) step-end:等同于 steps(1, end) cubic-bezier(<number>, <number>, <number>, <number>)
animation-delay--动画的延迟时间,默认值是0s
animation-iteration-count--动画的循环次数,默认值是一次infinite:无限循环
animation-direction--必须建立在循环的基础之上的
normal:正常方向 reverse:反方向运行 alternate:动画先正常运行再反方向运行,并持续交替运行 alternate-reverse:动画先反运行再正方向运行,并持续交替运行
CSS转换属性 transform 3D转换中元素移动坐标轴也会移动
CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
rotate旋转
rotateX() rotateY() rotateZ() rotate3d(x,y,z,deg)
元素的旋转,旋转以后,元素的坐标轴也跟着发生了旋转,所以会导致先转和后转的结果会不一样
scale伸缩
scale() scelex() scaley() scelez() scale3d(x,y,z)
当你图片伸缩的时候,是伸缩的空间坐标轴,并不是图片的大小,造成了一个视觉差的效果
skew倾斜
skewx() skewy()
倾斜是倾斜坐标轴,并且会将坐标轴进行拉伸
translate移动
translatex() transelatey() translatez() translate3d(x,y,z)
相对于元素本身发生的偏移
原文地址:https://www.cnblogs.com/yeming980912/p/11240370.html