盒阴影：box-shadow：
水平方向偏移位置 垂直方向偏移位置 模糊度 阴影尺寸 颜色
必选（正负值） 必选(正负） 可选（正值） 可选（正负） 可选
位置（可选） outset（外阴影）|inset（内阴影）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.items{
width: 300px;
height: 300px;
background-color: red;
margin: 50px;
box-shadow: 10px 10px 10px 10px gold inset;
}
</style>
</head>
<body>
<div class="items">
</div>
</body>
</html>
字阴影：text-shadow：；
水平方向阴影偏移的位置 垂直方向阴影偏移的位置 模糊度 颜色
必选正负 必选正负 可选正值 可选
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.items{
width: 300px;
height: 300px;
background-color: blue;
color: #fff;
font-size: 30px;
border-radius: 50%;
line-height: 300px;
text-align: center;
text-shadow: 10px -10px 5px red;
}
</style>
</head>
<body>
<div class="items">
周五啦
</div>
</body>
</html>
背景渐变：
- 线性渐：background：linear-gradient（方向，颜色1，颜色2……）；
方向：to left right top bottom deg（弧度）
- 径向渐变：
background：-webkit-radial-gradient（渐变中心，形状，颜色1，……）有可能不被浏览器识别
形状一般默认椭圆 circle是圆
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.items{
width: 300px;
height: 300px;
border: 3px solid #000000;
/*background: linear-gradient(to right bottom,red, orange, yellow,green);*/
/*background: linear-gradient(90deg,red,orange, green,yellow);*/
background: -webkit-radial-gradient(left top,circle, red orange,green,yellow);
}
</style>
</head>
<body>
<div class="items">
</div>
</body>
</html>
1915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
