CSS3
渐变背景
使用场景。例如:http://www.woniuxy.com/
在网页设计的过程中,我们设置网页背景的时候有可能不是一个纯色的背景,可能是一个渐变的背景。
问题:像这种蜗牛官网这种渐变背景的页面怎么来做?
我们可以通过背景图片来做,像这种规则渐变图片,可以切1px像素的图片进行平铺,那种不规则图片只能引用整张图片,每次修改都很麻烦,需要设计改图;所以通过图片来实现渐变,可拓展性差,还影响页面加载速度。
如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。
CSS3提供了两种渐变:线性渐变和径向渐变
渐变:其实就是一个”图像“,所以使用background-image属性
线性渐变
-
默认从上到下,至少有两个颜色,通过linear-gradient来设置
-
线性渐变是渐变线(方向)和色标组成
-
语法:
/* linear-gradient 是用于创建一个线性渐变的 "图像" */ baclground-image:linear-gradient(颜色1,颜色2,....); backgound-image:linear-gradient(to 结束的方向,red,green) baclground-image:linear-gradient(颜色1 百分比,颜色2 百分比,....); baclground-image:linear-gradient(渐变线方向,颜色1 位置, 颜色2 位置, 颜色3 位置); 渐变线方向: to 方向单词 角度deg 色标: 颜色:十六进制,rgb ,rgba,单词 位置:百分比,或者像素
方向(渐变线)
-
用来控制渐变的方向
-
原理:
渐变线是从渐变盒子中心点向两个方向径向延伸,起点和终点是渐变线与经过渐变盒子的一个角的垂直线的相交点。
-
方向取值范围
-
单词:利用to来指定渐变线结束的方向,top bottom left right
语法:
backgound-image:linear-gradient(to 结束的方向,red,green)
- to top—— 0deg
- to bottom(默认值) —— 180deg或者 -180deg
- to left —— -90deg或 270deg
- to right—— 90deg或-270deg
- to top left—— -45deg
- to top right —— 45deg
- to bottom left —— -135deg
- to bottom right —— 135deg (-225deg)
-
角度方向:deg单位
角度可以设置正数或者负数。
0deg表示沿着中心线由下向上的方向,类似y轴的负方向,正数角度代表顺时针旋转多少度,负数代表逆时针旋转
语法:
background-image:linear-gradient(角度,red,green);
-
色标
色标=(颜色位置)
-
色标包含一个颜色和一个位置,用来控制渐变的颜色变化
-
取值:
- 颜色:单词,十六进制,rgb,rgba(设置背景颜色可以透明)
- 位置:百分比,像素px
-
注意:
-
渐变没有写位置值,只有颜色,均匀渐变效果;
background-image: linear-gradient(green,red); 等价于 background-image: linear-gradient(green 0%,red 100%); background-image: linear-gradient(green,red,pink); 等价于 background-image: linear-gradient(green 0%,red 50%,pink 100%);
-
渐变至少需要写两个色标,如果色标中首尾两个默认不写,是0%和100%;
-
当然也可以自己定义位置值:
background-image: linear-gradient(red 50%,green 80%,yellow 90%);
如果渐变有三个值,第一个值位置设置50%,第二个设置80%,第三个设置90%,0%-50%默认第一个种颜色的纯色,50%-80%是第一种颜色到第二颜色的渐变,80%-90%是第二种颜色到第三种颜色的渐变,90%-100%是第三种颜色的纯色。
-
色标可以无数个,可以设置多种颜色
-
重复线性渐变
可以实现线性渐变的重复效果,使色标在渐变盒子中按照方向径向无限重复。
注意: 起始值必须是0开始
-
语法:
background-image:repeating-linear-gradient(red 0%,green 20%);
练习:
兼容问题
/* 针对chrome或者safira识别 */
background-image: -webkit-linear-gradient(red,green);
/* 针对firefox */
background-image: -moz-linear-gradient(red,green);
/* 针对opera */
background-image: -o-linear-gradient(red,green);
/* 针对ie浏览器识别的前缀 */
background-image: -ms-linear-gradient(red,green);
/* 通用的样式 */
background-image: linear-gradient(red,green);
出现前缀的原因:W3c没有发布正式规范时,发布草案里提出新属性,各个厂商为了和之后发布的正式规范区分,就将自己的添加前缀来进行区分。当规范发布以后,各个浏览器就会逐步使用w3c规范的属性。
ie9及以下浏览不支持线性渐变(使用ie提供渐变滤镜)
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');
- GradientType:代表渐变的方向,0代表垂直方向,1代表水平方向,只有两个方向。
- startColorstr:代表开始颜色,endColorstr代表结束的颜色
- #ff0000ff:代表颜色,格式是#aarrggbb aa代表透明度 rrggbb代表十六进制
照片滤镜
**注意:**background-image可以同时引入图片和渐变,中间使用逗号隔开,写在前面的盖住后面的,可以实现照片滤镜的效果
![image-20210203144507275](https://i-blog.csdnimg.cn/blog_migrate/e8eb3da3bb6995eaf5db66ace8011ad5.png)
.box{
width: 500px;
height: 319px;
border: 1px solid red;
/* background-image: url(img/gyy.jpg);
background-image: linear-gradient(transparent , red); */
/* background-image可以同时引入图片和渐变,中间用逗号隔开,前面会盖住后面的 */
background-image: linear-gradient(transparent ,red),url(img/gyy.jpg);
}
<div class="box">
<!-- <img src="img/gyy.jpg" alt=""> -->
</div>
background-image:linear-gradient(rgba(255,255,255,0.5 ),rgba(255,255,255,0.8)),url("./img/gyy.jpg");
透明度
- opacity:设置盒子透明度,取值0-1 ,0代表完全透明,1代表不透明
- 设置0时,当前盒子本身的效果和里面的所有元素都会透明
- 设置0时,盒子完全透明,但是盒子还在原来的位置不变
- rgba():设置颜色的透明度,a代表透明,取值0-1 ,0代表完全透明,1代表不透明
- rgba只作用于当前的属性的颜色透明
- transparent:颜色完全透明
径向渐变
径向渐变其实就是椭圆渐变,圆是一种特殊的椭圆。径向渐变从圆心出发,沿着半径径向渐变,以椭圆的形式向外径向发散出去。
径向渐变无法实现ie兼容,只有ie10以上 支持标准写法
径向渐变由两部分构成:
-
椭圆:用来控制径向渐变的大小,形状,位置。
-
色标:每个色标都包含一个颜色和一个渐变位置,用来控制渐变颜色变化
-
标准语法:
background-image:radial-gradient( 大小 形状 at x轴 y轴,色标1,色标2 )
圆心
默认值center center,盒子的中心点
/* 圆心 通过at来控制圆心的位置 其中0px 0px 盒子的左上角,center center是默认值,中心点*/
/*
background-iamge:radial-gradient(at x轴 y轴,red,green)
- x轴:left | |right | center |像素 | 百分比
- y轴:top | center | bottom | 像素 | 百分比
形状
- ellipse:椭圆,默认值,
- circle:正圆
大小
通常需要搭配圆心位置来调整
- farthest-corner:默认值,半径从圆心到最远角
- closest-corner:半径从圆心到最近角
- farthest-side:半径从圆心到最远边
- closest-side:半径从圆心到最近边
重复径向渐变
background-image:repeating-radial-gradient(red 0% ,green 30%);
-
注意,色标的首尾不能同时在0%和100%的位置,要留空间给渐变重复
-
<style> .box{ width: 1000px; height: 1000px; margin: auto; /* 重复径向渐变 */ background-image: repeating-radial-gradient(pink 0px,pink 20px , tomato 20px , tomato 40px); } </style> </head> <body> <div class="box"></div> </body>
练习2:
阴影
盒子的阴影
box-shadow设置盒子的阴影,IE对属性兼容不是很好
-
语法
box-shadow:X轴的偏移量 Y轴的偏移量 阴影效果虚化程度 阴影大小 颜色 box-shadow:10px 10px 20px 20px rgba(0,0,255,0.5); 设置两个值,阴影效果和阴影大小可以默认不写 box-shadow:10px 10px rgba(0,0,255,0.5); /inset将外部阴影 (outset) 改为内部阴影 box-shadow:10px 10px rgba(0,0,255,0.5) inset;
-
box-shadow
可以设置多层阴影,多层阴影中间使用逗号隔开 -
box-shadow:10px 10px 20px 20px rgba(0,0,255,0.5), -10px 10px 20px 20px rgba(255,0,255,0.5), 10px -10px 20px 20px rgba(255,0,0,0.5);
例如:
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid red;
margin: 100px auto;
background-color: pink;
/* 设置盒子阴影 */
/* x轴偏移量 y轴偏移量 阴影的虚化程度 阴影的大小 颜色; */
box-shadow: 5px 10px 15px 10px red;
/* 多层阴影 */
/* box-shadow: 5px 0px 15px 10px red,0px 15px 10px 10px green; */
}
.box:hover{
/* box-shadow: 2px 3px 5px 1px #cccccc; */
box-shadow: 5px 0px 15px 10px red,0px 15px 10px 10px green;
}
</style>
<div class="box"></div>
文字阴影
text-shadow设置文字阴影
-
语法:
text-shadow:x轴偏移量 y轴偏移量 阴影虚化程度 颜色; text-shadow:2px 3px 5px red;
.box{
width: 350px;
height: 150px;
font-size: 50px;
/* 文字阴影 X轴的偏移量 Y轴的偏移量 阴影效果虚化程度0~无穷 颜色 ;*/
/* text-shadow: 5px 10px 2px red; */
text-shadow: 1px 1px 2px black,-1px -1px 2px white; /* 凸起的文字 */
color:slategray;
background-color: slategray;
float: left;
}
.box2{
width: 400px;
height: 150px;
/* border: 1px solid red; */
font-size: 50px;
/* 文字阴影 X轴的偏移量 Y轴的偏移量 阴影效果虚化程度0~无穷 颜色 ;*/
/* text-shadow: 5px 10px 2px red; */
text-shadow: -1px -1px 2px black,1px 1px 2px white; /* 凹陷的文字 */
color:slategray;
background-color: slategray;
float: left;
}
-webkit-box-reflect 倒影
-
概念:实现图片的倒影
-
语法:
box-reflect:倒影方向 倒影和图片之间的距离 [可添加渐变效果]
- above:指定倒影在对象的上边(倒影和内容重叠)
- below:指定倒影在对象的下边
- left:指定倒影在对象的左边
- right:指定倒影在对象的右边
-
注意:
- box-reflect 目前就谷歌有实现,并且该css属性在谷歌中使用需加收
-webkit-
前缀
- box-reflect 目前就谷歌有实现,并且该css属性在谷歌中使用需加收
-webkit-box-reflct
可以设置图片倒影,并不是所有浏览器都支持,chrome可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{margin:50px 0;}
.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
font:bold 100px/1.231 georgia,sans-serif;text-transform:uppercase;}
</style>
</head>
<body>
<div class="reflect">你看到倒影了么?<img src="img/gyy.jpg" alt=""></div>
</body>
</html>
圆角
-
border-radius设置圆角
-
取值
简写形式:水平半径和垂直半径默认是相等的 一个值:四个角 border:10px; 两个值:左上右下 右上左下 三个值:左上 右上左下 右下 四个值:左上 右上 右下 左下 标准写法: /前面代表四个方向的水平半径,/后面代表四个方向的垂直半径 border-radius:10px 10px 10px 10px / 10px 10px 10px 10px;
水平半径和垂直半径
原理:
水平半径和垂直半径一起绘制了圆角的弧度,每个盒子都有四个角,每个角可以单独控制它圆弧程度
水平半径和垂直半径共同形成了圆弧
内半径和外半径
当border-radius的值小于boder时,我们边框内部没有圆角效果,
当border-radius的值大于border时,边框里面和外部的圆角不一样,外部采用设置的圆角半径大小,这个圆角半径称为外半径,里面采用border-radius减去border的宽度作为半径来绘制圆弧,这个半径称为内半径。
内半径 = 外半径 - border
![image-20210203174037200](https://i-blog.csdnimg.cn/blog_migrate/167b1320868c3219fa5d21aedb438eca.png)
圆角应用
- 胶囊的绘制:前提条件,盒子的宽高不一样,border-radius取宽高最小值的一半以上
- 绘制正圆:盒子宽高一样,设置border-radius:50%;
- 绘制椭圆:盒子宽高不一样,设置border-radius:50%;
当border-radius的值小于boder时,我们边框内部没有圆角效果,
当border-radius的值大于border时,边框里面和外部的圆角不一样,外部采用设置的圆角半径大小,这个圆角半径称为外半径,里面采用border-radius减去border的宽度作为半径来绘制圆弧,这个半径称为内半径。
内半径 = 外半径 - border
![image-20210203174037200](https://i-blog.csdnimg.cn/blog_migrate/167b1320868c3219fa5d21aedb438eca.png)
圆角应用
- 胶囊的绘制:前提条件,盒子的宽高不一样,border-radius取宽高最小值的一半以上
- 绘制正圆:盒子宽高一样,设置border-radius:50%;
- 绘制椭圆:盒子宽高不一样,设置border-radius:50%;