CSS3中新特性样式篇
背景
background-origin： 规定背景图片的定位区域。 ☞ padding-box 背景图像相对内边距定位（默认值） ☞ border-box 背景图像相对边框定位【以边框左上角为参照进行位置设置】 ☞ content-box 背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】 备注： 1. 默认盒子的背景图片是在盒子的内边距左上角对齐设置。 background-clip： 规定背景的绘制区域。 ☞ border-box 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】 ☞ padding-box 背景被裁切到内边距区域【将背景图片在内边距区域（包含内容区域）显示】 ☞ content-box 背景被裁切到内容区域【将背景图片在内容区域显示】 background-size： 规定背景图片的尺寸。 ☞ cover ☞ contain
边框
box-shadow： 盒子阴影 border-radius： 边框圆角 border-image: 边框图片 /* 设置边框图片 */ border-image-source: url("2.png"); /* 边框图片裁切 : 不需要带单位*/ border-image-slice: 20; /* 设置边框图片的平铺方式 */ /* border-image-repeat: stretch; */ border-image-repeat: round; /* border-image-repeat: repeat; */ border-image-width: 20px;
文本
☞text-shadow： 设置文本阴影
CSS3新特性之选择器篇
☞ 属性选择器： [属性名=值] {} [属性名] {} 匹配对应的属性即可 [属性名^=值] {} 以值开头 [属性名*=值] {} 包含 [属性名$=值] {} 以值结束 ☞ 结构伪类选择器： :first-child {} 选中父元素中第一个子元素 :last-child {} 选中父元素中最后一个子元素 :nth-child(n) {} 选中父元素中正数第n个子元素 :nth-last-child(n) {} 选中父元素中倒数第n个子元素 备注； n 的取值大于等于0 n 可以设置预定义的值 odd[选中奇数位置的元素] even【选中偶数位置的元素】 n 可以是一个表达式： an+b的格式 ☞ 其他选择器： :target 被锚链接指向的时候会触发该选择器 ::selection 当被鼠标选中的时候的样式 ::first-line 选中第一行 ::first-letter 选中第一个字符
CSS3新特性之颜色渐变
☞ 线性渐变： 1. 开始颜色和结束颜色 2. 渐变的方向 3. 渐变的范围 background-image: linear-gradient( to right, red, blue ); 备注： 表示方向： 1. to + right | top | bottom | left 2. 通过角度表示一个方向 0deg [从下向上渐变] 90deg【从左向右】 ☞ 径向渐变： /* 径向渐变 */ background-image: radial-gradient( 100px at center, red, blue );
2D转换
☞ 位移 transform: translate(100px,100px); 备注： 位移是相对元素自身的位置发生位置改变 ☞ 旋转 transform: rotate(60deg); 备注： 取值为角度 ☞ 缩放 transform: scale(0.5,1); 备注： 取值为倍数关系，缩小大于0小于1，放大设置大于1 ☞ 倾斜 transform: skew(30deg,30deg); 备注： 第一个值代表沿着x轴方向倾斜 第二个值代表沿着y轴方向倾斜
3D转换
☞ 位移 transform: translateX() translateY() translateZ() ☞ 旋转 transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg); ☞ 缩放 transform: scaleX(0.5) scaleY(1) scaleZ(1); ☞ 倾斜 transform: skewX(30deg) skewY(); ☞ transform-style: preserve-3d; 将平面图形转换为立体图形
CSS3新特性之动画篇
过渡
https://www.cnblogs.com/afighter/p/5731293.html 补间动画 /* 设置哪些属性要参与到过渡动画效果中： all */ transition-property: all; /* 设置过渡执行时间 */ transition-duration: 1s; /* 设置过渡延时执行时间 */ transition-delay: 1s; /* 设置过渡的速度类型 */ transition-timing-function: linear;
动画
/* 1定义动画集 */ @keyframes rotate { /* 定义开始状态 0%*/ from { transform: rotateZ(0deg); } /* 结束状态 100%*/ to { transform: rotateZ(360deg); } } 注意： 1. 如果设置动画集使用的是百分比，那么记住百分比是相对整个动画执行时间的。
CSS3新特性之网页布局篇
伸缩布局或者弹性布局【响应式布局】
☞ 设置父元素为伸缩盒子【直接父元素】 display： flex 为什么在伸缩盒子中，子元素会在一行上显示？ 1. 子元素是按照伸缩盒子中主轴方向显示 2. 只有伸缩盒子才有主轴和侧轴 3. 主轴： 默认水平从左向右显示 4。 侧轴： 始终要垂直于主轴 ☞ 设置伸缩盒子主轴方向（flex-direction） flex-direction: row; 【默认值】 flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; ☞ 设置元素在主轴的对齐方式( justify-content) /* 设置子元素在主轴方向的对齐方式 */ justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-between; justify-content: space-around; ☞ 设置元素在侧轴的对齐方式 （align-items） align-items: flex-start; align-items: flex-end; align-items: center; /* 默认值 */ align-items: stretch; ☞ 设置元素是否换行显示（flex-wrap） 1. 在伸缩盒子中所有的元素默认都会在一行上显示 2. 如果希望换行： flex-wrap: wrap | nowrap; ☞ 设置元素换行后的对齐方式（ align-content） align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-around; align-content: space-between; /* 换行后的默认值 */ align-content: stretch;