CSS3新特性

CSS3新特性(样式)

背景

background-origin:   规定背景图片的定位区域。
	☞ padding-box    背景图像相对内边距定位(默认值)
	☞ border-box	 背景图像相对边框定位【以边框左上角为参照进行位置设置】
	☞ content-box    背景图像相对内容区域定位【以内容区域左上角为参照进行位置设置】

   备注:
	默认盒子的背景图片是在盒子的内边距左上角对齐设置。


background-clip:  	 规定背景的绘制区域。
	☞ border-box	 背景被裁切到边框盒子位置 【将背景图片在整个容器中显示】
	☞ padding-box	 背景被裁切到内边距区域【将背景图片在内边距区域(包含内容区域)显示】
	☞ content-box	 背景被裁切到内容区域【将背景图片在内容区域显示】


background-size:     规定背景图片的尺寸。
	☞ cover
	☞ contain

边框

 box-shadow:      盒子阴影
 border-radius:   边框圆角
 border-image:	  边框图片

	 
			 /* 设置边框图片 */
			 border-image-source: url("xx.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;
posted @ 2019-12-31 15:50  Samsara315  阅读(127)  评论(0编辑  收藏  举报