CSS3 基础知识学习01

1. CSS3 圆角

border-radius:设置4个角为圆角

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值： 四个圆角值相同

border-radius	所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

<style>
		   #img1 {
			   border: 5px solid red;
			   border-radius: 20px;
		   }
		   #img2 {
			   border: 3px solid aqua;
			   border-radius: 20px 10px; 
		   }
		   #img3 {
			   border:3px solid blue;
			   border-radius: 180px; /*圆形*/
		   }
		</style>

<img id="img1" src="imgs/avatar5.png" > <br>
		<img id="img2" src="imgs/avatar5.png" ><br>
		<img id="img3" src="imgs/avatar5.png" >  （圆形）

显示如下;

 2. CSS3 盒阴影

box-shadow : 属性被用来添加阴影

<style>
	   div {
		   width: 200px;
		   height: 100px;
		   background-color: aqua;
		   box-shadow: 10px 10px 3px red; /* 四个值：水平、垂直、模糊程度、模糊颜色 */
		   }
		p {
			text-shadow: 10px 10px 2px blue;
		}

<h4>box-shadow: 属性被用来添加阴影</h4>
		<div>测试box-shadow阴影设置</div>
		<h4>文本阴影设置</h4>
		<p>测试文本阴影设置</p>

 显示如下：

3. background-clip属性指定背景绘制区域

（1）border-box 默认值，背景包含边框

#div1 {
			  width: 200px;
			  height:100px;
			  border:10px dotted black;
		  	  padding:35px;
			  background-color: yellow;
			  background-clip:border-box;
			 }
			h2 {
				background-color: red;

<div id="div1">
			<h2>测试border-box</h2>
		</div>

显示如下:

 （2）padding-box 背景不包含边框

h2 {
				background-color: red;
			}
			#div2 {
				width: 300px;
				height:100px;
				border:10px dotted black;
				padding:35px;
				background-color: yellow;
				background-clip:padding-box;
			}

<div id="div2">
			<h2>测试padding-box</h2>
		</div>

显示如下：

 （3）content-box 只有内容设置背景

#div3 {
				width: 300px;
				height:100px;
				border:10px dotted black;
				padding:35px;
				background-color: yellow;
				background-clip:content-box;
			}
<div id="div3">
			<h1>测试content-box</h1>
		</div>

显示如下：

4.background-origin 属性

background-Origin属性指定background-position属性（背景图片位置）应该是相对位置。

（1）border-box 背景图像边界框的相对位置

#div1 {
			   width:270px;
			   height:100px;
			   border:10px dotted black;
			   padding:35px;
			   background-image: url(imgs/avatar2.png);
			   background-repeat: no-repeat;
			   background-origin:border-box;

<div id=div1>
			<h1>border-box</h1>
		</div><br>

显示如下;

（2）padding-box 背景图像填充框内的相对位置

#div2 {
			   width:270px;
			   height：100px;
			   border: 10px dotted black;
			   padding:35px;
			   background-repeat: no-repeat;
			   background-image: url(imgs/avatar2.png);
			   background-origin: padding-box;
		   }

<div id=div2>
			<h1>padding-box</h1>
		</div><br>

显示如下：

 (3) content-box  背景图像的相对位置的内容框

#div3 {
			   width:270px;
			   height: 100px;
			   border: 10px dotted black;
			   padding:35px;
			   background-repeat: no-repeat;
			   background-image: url(imgs/avatar2.png);
			   background-origin: content-box;
		   }

<div id=div3>
			<h1>content-box</h1>
		</div>

4.background-size属性指定背景图片大小

length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)

percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"

cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

<style>
		   #div1 {
			   width: 270px;
			   height: 100px;
			   border:10px dotted red;
			   background-image: url(imgs/avatar2.png);
			   background-size: 100%;
		   }
		</style>

<div id="div1">
			  <h1>background-size</h1>
		  </div>

5. CSS3 渐变

(1)线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

#div1 {
			   width: 300px;
			   height: 100px;
			   background-image:linear-gradient(to right,red,blue);
}
<div id="div1">
		   <h4>background-image:linear-gradient (direction, color-stop1, color-stop2, ...);</h4>
	   </div>

显示如下：

(2)径向渐变（Radial Gradients）- 由它们的中心定义 

#div2 {
			   width: 300px;
			   height: 100%;
			   background-image: radial-gradient(ellipse,yellow,pink); /* 椭圆 */
		   }
<div id="div2">
		<h4>background-image:radial-gradient(shape size at position, start-color, ..., last-color);</h4>
	</div>

显示如下：

6. CSS3 2D 转换

（1）translate()--根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

img {
			   width: 100px;
			   height:100px;
			   border: 5px solid red;
			   animation: mytranslate 5s;
		   }
		   @keyframes mytranslate {
			   from {transform:translate(0px,0px)}
			   to {transform:translate(200px,100px)}
		   }
<img src="imgs/avatar3.png" />

（2）rotate()--在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

mg {
			   width: 100px;
			   height:100px;
			   border: 5px solid red;
			   animation: myrotate 5s;
		   }

@keyframes myrotate{
			   from {transform:rotate(0deg)}
			   to {transform:rotate(360deg)}

（3）scale()--该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

img {
width: 100px;
			   height:100px;
			   border: 5px solid red;
animation: myscale 5s;
}
@keyframes myscale{
			   from{transform:scale(1,1)}
			   to { transform:scale(1.5,1.5)}
		   }

（4）skew()---该元素在X轴和Y轴上倾斜。

img {
width: 100px;
			   height:100px;
			   border: 5px solid red;
animation:myskew 5s;
}
@keyframes myskew{
			   from{transform:skew(0,0)}
			   to {transform:skew(20deg,30deg)}
		   }

（5）matrix()--将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜

7. CSS3 3D 转换

rotateX()--围绕其在一个给定度数X轴旋转的元素。

<style>
		   img {
			   width: 100px;
			   height:100px;
			   border:5px solid red;
			   animatain:myrotate 5s;
		   }
		   @keyframes myrotate {
			   from {trandform:rotateY(0deg);}
			   to {transform:rotateY(360deg)}
		   }
		</style>
<img src="imgs/avatar3.png" >

8. CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

transition: CSS属性1 秒数, CSS属性2 秒数....

<style>
		img {
			width:100px;
			height:100px;
			border: 5px solid red;
			transition:width 3s,height 3s,border 3s;
		}
		img:hover {
			width: 200px;
			height: 200px;
			border: 10px solid blue;
		}
		</style>

<img src="imgs/avatar3.png" >

9. CSS3 多媒体查询

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询语法 @media not|only mediatype and (expressions) { CSS 代码...; }

not|only

not是用来排除掉某些特定的设备的 比如 @media not print（非打印设备）

only用来指定某种特别的媒体类型 比如 @media only screen (用于电脑屏幕，平板，智能手机等。)

mediatype:

1. all 用于所有多媒体类型设备

2. print 用于打印机

3. screen 用于电脑屏幕，平板，智能手机等。

4. speech 用于屏幕阅读器

(expressions)--配置具体设备的表达式

如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。

<style>
		   body {
			   background-color: aqua;
		   }
		   @media screen and (max-width:500px) {
			   body {
				   background-color: chartreuse;
			   }
		   }
		</style>