css3.png
一、文字阴影
text-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 200px;
margin: 200px auto;
text-align: center;
font-size: 50px;
font-weight: bold;
/*text-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 */
text-shadow: 5px 5px 5px blue;
}
</style>
</head>
<body>
<div id="box">
今天天气真好！
</div>
</body>
</html>
阴影01.jpg
可以设置多个阴影，参数之间用逗号分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 200px;
margin: 200px auto;
text-align: center;
font-size: 50px;
font-weight: bold;
text-shadow: 5px 5px 5px blue,20px 20px 6px red;
}
</style>
</head>
<body>
<div id="box">
今天天气真好！
</div>
</body>
</html>
阴影02.jpg
二、盒子阴影
box-shadow: X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 200px;
width: 200px;
background-color: pink;
margin: 200px auto;
box-shadow: 10px 10px 10px red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
阴影03.jpg
可以设置多个阴影，参数之间用逗号分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
height: 200px;
width: 200px;
background-color: pink;
margin: 200px auto;
box-shadow: 10px 10px 10px red,20px 20px 10px blue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
阴影04.jpg
三、图片背景
background-size
参数不同，效果不一
background-size: 600px 600px
**设置固定大小的图片背景 **
01.jpg
**
background-size: cover
等比例缩放图片到完全覆盖容器，背景图像有可能超出容器（此时背景全部被覆盖，但是背景图片的长或款可能会溢出容器）
**
02.jpg
background-size: contain;
完全包含图片，一端完全撑开，另一端等比例缩放
03.jpg
background-size: auto
背景图片真实大小
04.jpg
小知识：
background-position: center center；
保证图片拉伸后，视觉中心在最中间
四、线性渐变（IE9及IE9以下不支持）
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。
background:linear-gradient(角度, 颜色1, 颜色2, 颜色3)
根据角度 创建线性渐变
background: linear-gradient(60deg,red,yellow,green);
渐变1.jpg
background:linear-gradient(to 方向, 颜色1, 颜色2, 颜色3)
根据方向（可以设置两个方向,中间用空格隔开） 创建线性渐变
background: linear-gradient(to left,red,yellow,green);
渐变2.jpg
五、径向渐变（IE9及IE9以下不支持）
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）
background: radial-gradient(颜色1,颜色2，等等，);
颜色结点均匀分布,注意可设置多个颜色
background:radial-gradient(pink, purple)
渐变.jpg
background: radial-gradient(颜色1 大小 ，颜色2 大小);
设置大小的的渐变
background: radial-gradient(pink 20px,purple 40px);
渐变 (2).jpg
background: radial-gradient(at 方向,颜色1，颜色2);
可以控制方向
background: radial-gradient(at left,pink,purple);
渐变 (3).jpg
background: repeating-radial-gradient( );
重复径向渐变
background: repeating-radial-gradient(pink,purple 50px);
渐变 (4).jpg
喜欢就点赞
网友评论