1. CSS3渐变
渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片
gradient可以应用在所有接受图像的属性上
1.1 分类:
线性渐变(linear-gradient)变化的方向是一条直线
径向渐变(radial-gradient)变化的方向是从圆心向四周运动运动
1.2. 线性渐变 (linear-gradient)
用于创建一个表示两种或多种颜色线性渐变的图片。
1.2.1 参数值:
-
第一个参数: 渐变方向
从哪到哪发生渐变
关键词:
- to left 设置渐变为从右到左 . 相当于:
270deg
to right 设置渐变从左到右。 相当于:90deg
to top 设置渐变从下到上。 相当于:0deg
to bottom 默认):设置渐变从上到下。相当于:180deg
。这是默认值,等同于留空不写。 - 对角渐变:to top left / to top right / to bottom right / to bottom left
角度值: 单位:deg
(0deg = to top)
顺时针旋转 - to left 设置渐变为从右到左 . 相当于:
-
第二个参数: 颜色,位置 (百分比| 数值)
规定哪种颜色从开始发生渐变效果
比如:
red 10%
-
第三个参数: 颜色,位置 (百分比| 数值)
规定哪种颜色从开始发生渐变效果
比如:
blue 20%
-
后面反复继续
例子:
linear-gradient(30deg, red 10%, green 10%)
1.2.2 参数省略
第一个参数可以省略,默认从上往下,
后续每个参数描述某个关键点的位置的颜色,两个关键点之间渐变.
background-image: linear-gradient(#6fc 0%,red 100%);
1.2.3 渐变平铺
- repeating-linear-gradient: 重复的(线性渐变)
- .repeating-radial-gradient: 重复的(径向渐变)
1.2.4 带图片和透明度的渐变
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)),url(abc.jpg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 500px;
height: 500px;
border: 2px solid #000;
margin: 10px auto;
/* background-image:linear-gradient(30deg,red 20%,blue 80%); */
/* background-image:repeating-linear-gradient( 180deg,red 0%,red 10%,blue 10%,blue 20%,yellow 20%,yellow 30%);(重复的线性渐变) */
/* background-image:repeating-linear-gradient( 180deg,red 0%,red 15%,blue 30%); */
/* 渐变遮罩,图片上盖一层半透明的颜色 */
background-image: linear-gradient(135deg, rgba(255, 0, 0, .5) 0, rgba(0, 0, 255, .6) 200px, rgba(0, 0, 0, 0) 300px), url(./images/222.jpg)
/* 线性渐变方向不写,默认从上往下渐变,关键字to top ,to left;0是从下往上,角度值30deg 。百分数表示渐变开始和结束的位置,也可以使用像素渐变,如果渐变距离超出元素,则超出部分不显示,默认切掉了 */
}
/* 0度是从下往上,30度是左下往右上,90度是向右,180度是从上向下(默认) */
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
1.3. 径向渐变(radio-gradient)
用来展示由原点(渐变中心)辐射开的颜色渐变。
使用方式:
radial-gradient( shape [size ]?[at <position>,]?<color-stop>[,<color-stop>]+)
1.3.1 参数:
radial-gradient( shape [size ] at[position ],color 位置,color 位置,+)
镜像渐变: 圆/椭圆 半径 at 圆心,颜色 位置,颜色位置
-
shape 形状
- circle(圆)
- ellipse(椭圆,默认)
- 形状后面可以跟半径值
-
shape size: 半径
圆形的半径圆只有一个值,椭圆有两个值,
px
| 关键词关键词:
- closest-side: 圆心到最近的边
closest-corner: 圆心到最近的角【
farthest-side: 圆心到离圆心最远的边
farthest-corner(默认): 圆心到离圆心最远的角
- closest-side: 圆心到最近的边
-
position 确定圆心的位置
X坐标,Y纵坐标;如果只提供一个,第二值默认为50%,即center
值:
- px %
- X关键词 :left:左 center:中 right:右
- Y关键词 :top:上 center:中 bottom:下
-
color-stop:
颜色 位置
从中心到外部的颜色渐变范围
background-image: radial-grandient(circle,red,blue);
没有数值范围的时候颜色均分,从圆心开始到矩形最远的点均分颜色,然后绕圆心画圆染色,支持很多很多颜色
实例:
radial-gradient(ellipse 100% 100% at 300px 300px, #f00 10%, #ff0 20%, #080 100%)
1.3.2 重复径向渐变
原点放射渐变的图像。它类似于并且采取相同的论据,但它重复无限地在各个方向上停止颜色以覆盖整个容器。
渐变平铺repeating-
渐变属性
background: repeating-radial-gradient(red 0px ,red 20px,blue 20px,blue 40px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 500px;
height: 300px;
border: 2px solid #000;
margin: 10px auto;
/* background-image:radial-gradient( red ,blue); 默认渐变到最远的角 */
/*background-image:radial-gradient( red 50%,blue);/* 从50%的位置开始渐变 */
/*background-image:radial-gradient(circle,red,blue);正圆渐变*/
/* background-image:radial-gradient(circle closest-side at 200px 100px,red,blue);圆心水平200px 垂直100px位置,圆心也可以用关键字left center。 半径是最近的边closest-side,半径也可以是具体数值 */
/* background-image:repeating-radial-gradient(circle closest-side at 200px 100px,red 20px,blue 40px);重复的径向渐变 */
/* 径向渐变做图片的遮罩 */
background-image: repeating-radial-gradient(circle closest-side at 200px 100px, rgba(255, 0, 0, .5) 20px, rgba(0, 0, 255, .5) 40px), url(./images/333.jpg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
2. 遮罩 mask
了解一下
2..1 属性值:
-
-webkit-mask-image:;
遮罩图片url(‘’)
- linear-gradient
- radial-gradient
任何类型图片都是可以的,只是说不透明的图片我们看不到后面的背景
-
-webkit-mask-repeat
遮罩平铺属性值
- 默认repeat,
- no-repeat
- repeat-x
- repeat-y
- 行为类似于background-repeat
-
-webkit-mask-position
遮罩位置属性值:关键词 | % | length
和background-position支持的属性值表现一模一样
-
-webkit-mask-size
遮罩尺寸值:% | length
遮罩图片的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 10px auto;
background: url(./images/333.jpg) no-repeat 0 0/cover;
/* 遮罩,需要加兼容前缀 。图片不透明的地方能看到底图,透明的地方不能看到底图*/
/* 遮罩可以写多张图片,可以是渐变 */
-webkit-mask-image: url(./images/apple.png), linear-gradient(to right, rgba(255, 0, 0, 0), rgba(0, 0, 255, 1));
-webkit-mask-repeat: no-repeat;
/* 多张图片分别写位置 */
-webkit-mask-position: 0;
-webkit-mask-size: 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
3、box-reflect() 倒影
box-reflect:none | direction offset mask-box-image
3.1. direction 倒影在对象的位置
- above 上
- below 下
- left 左
- right 右
3.2. offset: 用长度值来定义倒影与对象之间的间隔,可以为负值
length | percentage
3.3. mask-box-image: 遮罩图像
<url>
: 使用绝对或相对地址指定遮罩图像。
. linear-gradient: 使用线性渐变创建遮罩图像。
. radial-gradient: 使用径向(放射性)渐变创建遮罩图像。- repeating-linear-gradient:使用重复的线性渐变创建背遮罩像。
. repeating-radial-gradient: 使用重复的径向(放射性)渐变创建遮罩图像。 - none:无遮罩图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 300px;
height: 300px;
border: 2px solid black;
margin: 320px auto;
background: url(./images/333.jpg) no-repeat 0 0/cover;
/* 倒影-webkit-box-reflec方向:上above 右right 下below 左left。倒影间隔 20px。倒影遮罩图片*/
-webkit-box-reflect: above 20px url(./images/apple.png);
/* 倒影也可以使用图片遮罩、渐变遮罩 */
-webkit-box-reflect: below 20px linear-gradient(to top, rgba(0, 0, 0, 1), rgba(81, 14, 14, 0));
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
4. 盒子阴影 box-shadow
给盒子添加阴影表现效果,仿佛有光打到盒子上
和原盒子一样大小,包含border
4.1 属性值
- h-shadow 水平偏移量。允许负值 ( 必需)
- v-shadow 垂直偏移量。允许负值 (必需)
- blur 模糊半径 (可选。)
- spread 阴影的大小 (可选。)
- color 阴影的颜色 (可选。)
- outset 外部阴影 (默认) 内部阴影(inset可选 )
4.2 属性值介绍
-
水平,垂直偏移量长度单位
-
模糊半径
指阴影由完全的颜色到消失的长度,类于似渐变的长度。默认是0 -
阴影大小
默认是0,和原来一样大,单位
px
,正数表示放大,负数表示缩小 -
颜色
阴影颜色
-
inset/ outset,
默认outset外阴影,可以写inset改成内阴影,不遮挡文字遮挡盒子,遮挡背景,可用逗号分隔,类似背景渐变,可叠加
4.3 写法
box-shadow: h-shadow v-shadow blur spread color outset
box-shadow:10px 10px 5px 10px #000 outset
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 300px;
height: 100px;
border: 1px solid black;
background-color: pink;
/* box-shadow: 0 0px 10px 0px black inset; 内阴影,默认外阴影 */
box-shadow: 5px 6px 20px 2px black;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
5. 文字阴影 text-shadow
定义文字的阴影
5.1 属性值
- h-shadow 水平偏移量。允许负值 ( 必需)
- v-shadow 垂直偏移量。允许负值 (必需)
- blur 模糊半径 (可选。)
- color 阴影的颜色 (可选。)
类似于box-shadow;不支持缩放和内外阴影,可叠加逗号分隔
阴影叠加: 先渲染前面的,再渲染后面的
text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的,再渲染前面的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
#box {
width: 600px;
height: 100px;
font-size:50px;
text-shadow: 2px 2px 5px pink;
margin:20px;
}
</style>
</head>
<body>
<div id="box">HELLO WORLD</div>
</body>
</html>
5.2 文本阴影案例:
1. 层叠
color:red;
font-size:100px;
font-weight:bold;
text-shadow:2px 2px 0px white, 4px 4px 0px red;/*两个阴影*/
2. 光晕
color:white;
font-size:100px;
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
3. 火焰文字
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
font-family:Verdana, Geneva, sans-serif;
font-size:100px;
font-weight:bold;
color:white;