CSS笔记（美化图像）

一、插入图像

<img src="URL" alt="替代文本“>

<img>

标签并不会在网页中插入图像，而是从网页上链接图像，它创建的是被引用图像的占位空间

二、设置图像格式

1、定义图片大小

height：定义图像的高度

width：定义图像的宽度

ismap：将图像定义为服务器端图像映射

usemap：将图像定义为客户端图像映射

longdesc：指向包含长的图像描述文档的URL

2、定义图片边框

border:none

消除图像边框

1）边框样式（使用border-style属性）

虚线框

border-style:dotted | dashed

实线框

border-style:solid | double | groove | ridge | insert | outset

这几个取值分别表示实线、双线、立体凹槽、立体凸槽、立体凹边、立体凸边

2）边框颜色和宽度

border-color

和

border-width

均可快速定义（直接指定四个值，代表顶部、右侧、底部和左侧各边属性）

border可快速定义样式、粗细和颜色。例如：

border: solid 20px red

3、定义图像不透明度

CSS3

opacity:0~1

早期IE

filter:alpha(opacity=0~100)

4、定义圆角图像

border-radius:none | length | lengthA/lengthB | length1 length2 length3 length4

该属性初始值为none，适用于所有元素，除了border-collapse属性值为collapse的table元素

lengthA/lengthB：lengthA表示圆角水平半径，lengthB表示圆角垂直半径

5、定义阴影图像

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

<shadow>

该属性值可以用公式表示为inset&&[< l e n g t h>{2,4}&&color]，其中inset表示设置阴影的类型为内阴影，默认为外阴影。< l e n g t h>是由浮点数字和单位标识符组成的长度值，可取正负值，用来定义阴影水平偏移，垂直偏移，以及阴影模糊度、阴影扩展。必须设置偏移量，否则没效果

6、图文混排

重点就是设置图片浮动

float:left

三、设置背景图片

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

background-image：定义背景图像

background-color：定义背景颜色

background-origin：指定背景的显示区域

background-clip：制定背景的裁剪区域

background-repeat：设置背景图像是否及如何重复铺排

background-size：定义背景图片的大小

background-position：设置背景图像位置

background-attachment：定义背景图像的显示方式

1、定义背景图像

background-image: none | <url>

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>

使用重复的径向（放射性）渐变创建背景图像

线性：

linear-gradient([[[to top|to bottom] | | [to left|to right] ] | |<angle>,]?<color-stop>[,<color-stop>]+)

径向

radial-gradient([[<shape>| |<size>][at<position>]?,|at<position>,]?<color-stop>[,<color-stop>]+)

2、定义显示方式

background-repeat:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}

repeat-x：背景图像横向平铺（重复）

repeat-y：背景图像纵向平铺

repeat：背景图像在横向和纵向上平铺

no-repeat：背景图片不平铺

round：自动缩放直到适应且填充满整个容器（仅CSS3）

space：以相同间距平铺且填充满整个容器或某个方向（仅CSS3）

3、定义显示位置

background-position:

属性取值包括两个值定位x，y轴，默认0% 0%，等效于left top

4、定义固定背景

background-attachment: fixed|local|scroll

fixed：背景图像相对于浏览器窗体固定

scroll：相对于元素固定

local：相对于元素内容固定，也就是说当元素内容滚动时背景也会跟着滚动（仅CSS3）

5、定义坐标

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

border-box：从边框区域开始显示背景

padding-box：从补白区域开始显示背景

content-box：仅在内容区域显示背景

初始值为padding-box

background-clip:border-box | padding-box | content-box | text

border-box：从边框区域向外裁剪背景

padding-box：从补白区域向外裁剪背景

content-box：从内容区域向外裁剪背景

text：从前景内容（如文字）区域向外裁剪背景

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

cover：保持宽高比，将图片缩放到刚好完全覆盖所定义背景的区域

contain：保持宽高比，将图片缩放到宽度或高度刚好适应所定义背景的区域