响应式web开发二之CSS相关

一.CSS背景设置

表1-1

属性名	属性描述
background-color	设置元素的背景颜色。可以使用颜色名称、十六进制值、RGB、RGBA 或 HSL 值。
background-image	设置元素的背景图像。可以指定一张图像的 URL。使用 url() 函数。
background-repeat	定义背景图像是否重复。
background-attachment	控制图片的滚动行为
background-position	设置图像的起始位置
background-size	定义背景图像的大小。

其中background-repeat,background-attachment,background-size有多个可选值，以下是详解
1.background-repeat
repeat:默认值，在水平和竖直方向上都重复
repeat-x：仅在水平方向重复。
repeat-y：仅在垂直方向重复。
no-repeat：不重复。
2.background-attachment
scroll（默认值）：背景图像随着内容的滚动而滚动。
这是大多数元素的默认行为，背景图像会在用户滚动页面时一起移动。
示例代码

div {
    background-image: url('image.jpg');
    background-attachment: scroll;
}

fixed:背景图像不随用户的滚动而滚动，是固定的
这种效果常用于创建视觉深度或吸引人的背景，通常在全屏背景图像中使用。
实例代码

div {
    background-image: url('image.jpg');
    background-attachment: fixed;
}

3.background-position
top：顶部
bottom：底部
left：左侧
right：右侧
center：中心
使用关键字时，可以组合两个关键字，来设置水平和垂直位置，例如 top left、center center。
示例

div {
    background-image: url('image.jpg');
    background-position: top left; /* 背景图像放置在左上角 */
}

也可以使用百分比来确定图像位置

div {
    background-image: url('image.jpg');
    background-position: 50% 50%; /* 背景图像居中 */
}

同理还可以使用像素值
4.background-size
可以使用两个长度，第一个设置宽度，第二个设置高度，先宽后高
cover：背景图像会缩放，以完全覆盖元素的背景区域，可能会裁剪图像的一部分以保持纵横比。这种方式通常用于全屏背景效果。
实例代码

div {
    background-image: url('image.jpg');
    background-size: cover; /* 背景图像覆盖整个元素 */
}

contain：背景图像会缩放以完全适应元素的背景区域，但可能会在元素的某些边缘留下空白。这种方式也保持了图像的纵横比。
实例代码

div {
    background-image: url('image.jpg');
    background-size: contain; /* 背景图像完全适应元素 */
}

二.CSS3阴影和渐变

2.1.阴影

box-shadow类似于text-shadow,但
text-shadow:给对象设置文本阴影
box-shadow:给对象实现图层阴影效果
box-shadow基本语法

box-shadow: h-offset v-offset blur-radius spread-radius color inset;

1. h-offset（水平偏移）：必需，阴影相对于元素的水平偏移量。正值表示向右偏移，负值表示向左偏移。
2. v-offset（垂直偏移）：必需，阴影相对于元素的垂直偏移量。正值表示向下偏移，负值表示向上偏移。
3. blur-radius（模糊半径）：可选，阴影的模糊程度。值越大，阴影越模糊，越小则越清晰。设置为 0 时，阴影是锐利的。
4. color（颜色）：可选，阴影的颜色，可以使用颜色名称、十六进制值、RGB、RGBA 等。
5. inset（内阴影）：可选，指定阴影是内阴影，而不是默认的外阴影。
   示例代码:

   
   
   
   


   
盒子对象阴影测试
   
"box">DIV盒子内阴影
   
图片对象阴影测试
   
"box1">"images/1.jpg" alt="">

box-shadow:7px 4px 10px #000 inset;
7px为水平偏移量，大于0，所以在x轴右边
4px为垂直偏移量，大于0，所以在底部
10px（模糊半径）这个值控制阴影的模糊程度。10px 表示阴影的边缘会模糊10 像素
#000表示阴影的颜色
inset表示是内阴影
box-shadow:#000 7px 4px 10px;
7px是水平偏移，4px为垂直偏移，10px为模糊半径
运行效果