本文介绍了CSS中的阴影效果，包括box-shadow用于元素的外阴影和内阴影，以及text-shadow用于文字阴影的设置。同时，详细讲解了背景图像的使用，如多背景、背景大小、定位和裁剪。此外，还涵盖了线性渐变和径向渐变的创建，以及它们的重复形式，为网页设计提供了丰富的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
盒子阴影
box-shadou:h-shadou(x轴的偏移量) v-shadou(y轴的偏移量) blur（模糊值） spread（ 阴影大小） color（ 阴影颜色）；
h-shadou:阴影水平偏移量，正数往右，负数往左，必须的属性，单位px
v-shadou:阴影垂直偏移量，正数往下，负数往上，必须的属性，单位px
bler：阴影好的模糊值，不能为负数。可选属性，单位px
spread：阴影大小，正数阴影扩大（阴影对的大小大于盒子的大小），负数阴影缩小（阴影的大小小于盒子大小），0阴影大小和盒子相同
inset：内阴影
outset：外阴影，默认值
可以在一个元素上设置多个阴影，之间用逗号隔开
-->
<!--
文字阴影
text-shadou:h-shadou v-shadou blur color;
-->
<!--
多背景
background-image:url(图片路径)，url(图片路径)；
不同的背景用逗号隔开，并且可以给不同的背景设置不同属性（背景的起始位置和是否重复）
书写顺序越靠前，显示越靠上
背景图大小
取值：宽 高 ，如果只设置一个值，第二个值自动auto
cover覆盖：等比例缩放背景图片铺满整个盒子，但是背景图片可能无法完整显示
百分比：按照盒子大小进行百分比计算宽高，如果只设置一个值，第二个值会自动auto
contain：包含，等比例缩放背景图片到完整的盒子中，但是背景图在区域范围内不能铺满，取决于盒子和图片的比例不一致
-->
<!--
背景图的定位区域
背景图的定位属性：background-origin: padding-box(默认值，相对于内填充区域进行定位) content-box（相对于内容区域进行定位） border-box(背景图相对于边框区域进行定位)
-->
<!--
背景颜色的绘制区域
background-clip:content-box;背景裁减到内容区域，仅内容区域显示
padding-box背景裁剪到内填充区域，尽在内容区和内填充区显示
border-box背景裁剪到边框区域，在内容区内填充区边框区显示，是默认值
-->
<!--
线性渐变
background:linear-gradient(方向，颜色1 范围1，颜色2 范围2)
方向：
①使用位置的关键字
to right从左向右
to left从右向左
to top从下往上
to bottom从上往下
to right bottom从左上往右下
ti left bottom从右上往左下
to left top从右下往左上
to right top从左下往右上
②度数
0deg相当于to top
90deg相当于to right
180deg相当于to bottom
270deg相当于to left
范围：
①数值 单位px
②百分比
-->
<!--
重复性线性渐变
background:repeating-linear-gradient(方向，颜色1 范围1，颜色2 范围2)
-->
<!--
径向渐变：从一个点向四周渐变
background:radial-gradient(渐变的形状，颜色1 范围1，颜色2 范围2)
渐变的形状：ellipse椭圆，默认值
circle圆
圆心的位置：
background:radial-gradient(渐变的形状 at 水平位置 垂直位置，颜色1 范围1，颜色2 范围2)
位置取值：
①关键字:left rigth center
top bottom center
②px
③百分比：按盒子的宽高进行计算
重复性径向渐变
background:repeating-radial-gradient(渐变的形状,圆心，颜色1 范围1，颜色2 范围2)
-->
</body>
</html>
扫一扫
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
