前端开发者| 网站前端开发研究内容 |
| 适合新手前端开发的网站 |
| 网站前端开发的作用 |
html 代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>css3渐变</title>
<style>
div {
width: 400px;
height: 150px;
border: 1px solid #666;
line-height: 150px;
text-align: center;
font-weight: 900;
font-size: 30px;
color: #fff;
margin: 10px auto;
}
.totop {
background-image: -webkit-linear-gradient(
to top,
orange,
green
);
background-image: linear-gradient(to top, orange, green);
}
.totop-deg {
background-color: red;
background-image: radial-gradient(
300px 130px at center center,
red,
#fff,
green
);
}
.totop-deg3 {
background-image: linear-gradient(-360deg, orange, green);
}
.totop-deg2 {
background-image: linear-gradient(
to left,
red,
orange,
yellow,
green,
blue,
indigo,
violet
);
}
.totop {
background-image: linear-gradient(
to left,
rgba(255, 0, 0, 0) 0%,
rgba(255, 0, 0, 0.8) 7%,
rgba(255, 0, 0, 1) 11%,
rgba(255, 0, 0, 1) 12%,
rgba(255, 252, 0, 1) 28%,
rgba(1, 180, 7, 1) 45%,
rgba(0, 234, 255, 1) 60%,
rgba(0, 3, 144, 1) 75%,
rgba(255, 0, 198, 1) 88%,
rgba(255, 0, 198, 0.8) 93%,
rgba(255, 0, 198, 0) 100%
);
}
</style>
</head>
<body>
<div class=”totop”>自定义直线渐变</div>
<div class=”totop-deg”>径向渐变</div>
<div class=”totop-deg2″>多色线性渐变</div>
<div class=”totop-deg3″>使用角度：-360deg</div>
</body>
</html>
| 网站前端开发公司 |
| 网站开发前端和后端的区别 |
| 前端网站开发教程 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册