CSS新特性（2-2）_代码007(未授权)

本文介绍: 本文继续讲解CSS3其他的新特性，想看之前新特性点击这里，那么好本文正式开始。

本文继续讲解CSS3其他的新特性，想看之前新特性点击这里，那么好本文正式开始。

CSS3新增了边框阴影效果，一共四个属性值，可以控制想要控制的块边框阴影颜色、程度以及方向。
四个属性时：x 偏移量，y偏移量，阴影模糊半径，阴影颜色
三个属性三个：x 偏移量，y偏移量，阴影颜色
设置 insert 属性：insert 属性为向边框内展示阴影。
同时也可以通过，来设置多个阴影。

举例：

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  <style&gt;
	  .normal{
		  width:100px;
		  height:100px;
		  background-color:red;
		  box-shadow:10px 10px blue,inset 10px 10px pink; 
	  }
	  .normal2{
		  width:100px;
		  height:100px;
		  background-color:red;
		  box-shadow:10px 10px 5px gray;
	  }
  </style&gt;
</head>
<body>
	<div class="normal"></div><br><br>
	<div class="normal2"></div>
	
</body>
</html>

在这里插入图片描述

新增了几个背景属性，分别为
background–clip:确定背景所在区域，可以从边框、内容、内边距、默认四个方向进行选取。
background–origin:确定背景图片的对齐区域到底在哪里？默认都是左对齐，但是根据content 内容左对齐还是内容+内边距左对齐，可以通过该属性设置。
background–size:控制背景图片的尺寸大小。
b ackground：linear属性，可以设置线性渐变，如上下两个颜色渐变，左右两个颜色渐变，默认为上下渐变。

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  background:linear-gradient(to right,#ccc,#000)
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  background: rgb(31 ,120 ,50);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  border:1px solid gray;
		  transform: rotate(100deg);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
	  .normal{
		  width:100px;
		  height:100px;
		  border:1px solid gray;
		  transform: translate(100px);
	  }
  </style>
</head>
<body>
	<div class="normal"></div><br><br>
	
</body>
</html>