使用CSS3美化图像

    网页中的图像存在两种形式：

1. 使用<img>标签直接插入的图像
2. 以背景的形式显示的图像

    直接插入的图像多用来传递一种多媒体信息，把图像作为文档的内在对象(内联图像)。而背景图像多用来装饰网页，设计网页效果。

1，在网页中插入图像

<img src="images/1.jpg" alt="这里本来有一张图片，但是你的浏览器不支持显示图片"></img>

    img元素向网页中嵌入一副图像，从即使上分析,<img>标签并不会在网页中插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。

2，设置图像样式

    height width  ismap（将图像定义为服务器端图像映射） usemap(将图像定义为客户端图像映射) longdesc(指向包含长的图像)描述文档的URL

2.1 定义图像大小

<img src="images/1.jpg" width="400px"></img>

2.2 定义图像边框

    border

    1,边框样式

<style>
	.dotted{
		border-style:dotted;
	}
</style>
<img src="images/1.jpg" width="200px" class="dotted"></img>

    2，边框颜色和宽度

    border-color  border-width

<style>
	.dotted{
		border-style:dotted;
		border-color:red;
		border-width:3px;
	}
	.dashed{
		border-style:dashed;
		border-color:blue;
		border-width:4px;
	}
</style>
<img src="images/1.jpg" width="200px" class="dotted"></img>
<img src="images/1.jpg" width="200px" class="dashed"></img>

6.2.3 定义图像不透明度

opacity:0~1;

<style>
	.dotted{
		opacity:0.5;
	}
	.dashed{
		opacity:0.2;
	}
</style>
<img src="images/1.jpg" width="200px" class="dotted"></img>
<img src="images/1.jpg" width="200px" class="dashed"></img>

2.4 定义圆角图像

border-radius:none|<length>{1,4}[/<length>{1,4}]?;

    border-radius：属性初始值为none，适用于所有元素，除了border-collapse属性值为collapse的table元素，取值简单说明如下： none：默认值，表示元素没有圆角    <length>: 由浮点数字和单位标识符组成的长度值，不可为负值

    border-radius属性派生出了4个子属性。 border-top-right-radius:   border-top-left-radius   border-bottom-right-radius   border-bottom-left-radius

<style>
	.dotted{
		border-radius:20px;
		border-top-right-radius:40px;
	}
</style>
<img src="images/1.jpg" width="200px" class="dotted"></img>

2.5 定义阴影图像

box-shadow:none|<shadow>[,<shadow>]*;

<style>
	.dotted{
		border-radius:20px;
		box-shadow:8px 8px 14px red;
	}
</style>
<img src="images/1.jpg" width="200px" class="dotted"></img>

    box-shadow三个参数的属性：X轴位移，Y轴位移 阴影大小，阴影颜色。

3，设置背景图像

    CSS3增强了background属性的功能，允许在同一个元素内叠加多个背景图像。background属性又派生了8个子属性。

• background-image：定义背景图像
• background-color：定义背景颜色
• background-origin：指定背景的显示区域
• background-clip：指定背景的裁剪区域
• background-repeat：设置背景图像是否及如何重复编排
• background-size：定义背景图片的大小
• background-position：设置背景图像位置
• background-attachment：定义背景图像的显示方式

3.1 定义背景图像

background-image:none|<url>

<style>
	.bg{
		width:200px;
		height:200px;
		background-image:url(images/1.jpg);
	}
</style>
<div class="bg"></div>

    此外,CSS3支持background-image设置渐变背景，具体用法如下：

background-image:<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|<repeating-radial-gradient>

取值说明如下：

• <linear-gradient>：使用线性渐变创建背景图像
• <radial-gradient>：使用径向(放射性)渐变创建背景图像
• <repeating-linear-gradient>：使用重复的线性渐变创建背景图像
• <repeating-radial-gradient>：使用重复的径向渐变创建背景图像

<style>
	.bg2{
		width:200px;
		height:200px;
		background:linear-gradient(to top,red,blue);
	}
</style>
<div class="bg2"></div>

3.2 定义显示方式

    background-repeat:

取值说明如下：

• repeat-x：背景图像在横向上平铺
• repeat-y：背景图像在纵向上平铺
• repeat：背景图像在横向和纵向平铺
• no-repeat：背景图像不平铺
• round：背景图像自动缩放直到适应且填充满整个容器
• space：背景图像以相同的间距平铺且填充满整个容器或某个方向

<style>
	div{
		width:200px;
		height:200px;
		background-image:url(images/1.jpg);
		border-radius:30px;
	}
	.bg1{
		background-repeat:repeat-x;
	}
	.bg2{
		background-repeat:reepeat-y;
	}
	.bg3{
		background-repeat:round;
	}
	.bg4{
		background-repeat:space;
	}
</style>
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>

3.3 定义显示位置

    background-position属性取值包括两个值，它们分别用来定位背景图像的x轴，y轴坐标，取值单位没有限制。

3.4 定义固定背景

background-attachment:fixed|local|scroll

    默认值为scroll，具体取值说明如下：

• fixed：背景图像相对浏览器窗体固定
• scroll：背景图像相对元素固定
• local：背景图像相对元素内容固定

3.5 定义坐标

background-origin:border-box|padding-box|content-box;

background-origin初始值是padding-box，适用于所有元素。取值简单说明：

• border-box：从边框区域开始显示背景
• padding-box：从补白区域开始显示背景
• content-box：仅在内容区域显示背景

3.6 定义裁剪区域

    background-clip属性定义背景图像的裁剪区域。

3.7 定义大小

    background-size

background-size:[<lenght>|<percentage>|auto]{1,2}|cover|contain]

background-size取值说明：

• <length>：由浮点数字和单位标识符组成的长度值，不可为负值
• <percentage>：取值为0%到100%之间
• cover：保持背景图像本省的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域
• contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域

<style>
	div{
		width:400px;
		height:400px;
		background-image:url(images/1.jpg);
		border-radius:30px;
		background-size:cover;
	}
</style>
<div class="bg1"></div>

3.8 定义循环方式

    background-break