CSS3新增属性

---

CSS3新增属性

1、文字阴影

text-shadow:2px 3px 4px red;
			水平阴影位置 垂直阴影位置 阴影模糊距离 阴影颜色
			
注：水平阴影和垂直阴影可以设负值（-左+右）

2、盒子阴影

box-shadow:2px 3px 4px 5px blue inset;

inset:是否设置内阴影、放在最后（默认外阴影）
	  逗号隔开可以设置多方向阴影

3、圆角边框

border-radius:30px 50px;
    两个值时： 左上右下对角 右上左下对角
border-radius:30px 50px 60px;
    三个值时： 左上 右上左下对角 右下
border-radius:30px/50px;
            水平半径/垂直半径

单独设置圆角：

border-top-left-radius： 左上角圆角。
border-top-right-radius： 右上角圆角。
border-bottom-right–radius：右下角圆角。
border-bottom-left-radius： 左下角圆角。

4、换行

智能换行：word-wrap:break-word;

	先尝试把内容放在本行显示，若放不下再换行（没空格的长单词）；

粗暴换行：word-break:break-all;

	按顺序排列内容，超出范围时直接换行；
	normal：只在允许的段字点换行（默认）

5、背景裁切（背景颜色）

background-clip：属性值;

属性值

   border-box 背景融进边框（默认）
   padding-box 边框在背景的外边
   content-box 背景在自己的内容区(设padding时明显)

6、背景原点（背景图片）

background-origin：属性值;

属性值

  border-box 背景图融进边框
  padding-box 边框在背景图的外边（默认）
  content-box 背景图在自己的内容区(设padding时明显)

7、背景尺寸

background-size：属性值;

属性值

100% 100%      
	图片的大小填满整个盒子，显示完整，但比例改变；
cover 		
	图片的大小填满整个盒子，比例不变，但显示不完整（100% auto 高填满 但不完整）
containt 		
	图片比例不变，显示完整，但填不满整个盒子；（auto 100% 宽填满、高不一定）

8、边框属性

颜色边框：

（1）border-color：red yellow blue pink;

图片边框：

（2）border-image：url（路径）26 23 repeat；（简写时，不写outset的值）

单独写：

border-image-source：url（路径）;
border-image-slice：26 13; 让图片边框向内偏移（没有单位）
border-image-repeat：repeat/stretch/round; （平铺/拉伸/铺满）
border-image-outset：3; （边框扩大倍数）

9、多重背景属性

background：url（路径）no-repeat left center red；

当同一个盒子插入两张背景图时、给第一张图设背景颜色不起作用；给第二张图设可以；
或者另起一行设background-color：red;则背景颜色正常显示

总结

以上是对CSS3新增属性的小总结，后期将继续更新html基础知识点
文章为原创内容，要是遇到有不合适的地方欢迎赐教🙌