给一个 div
设置背景渐变填充指定宽度,类似于进度条的样式。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景渐变填充指定宽度</title>
<style>
#grad1 {
height: 200px;
border-radius: 8px;
background-color: white; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, rgba(125,54,255,0.8) 0%,rgba(255,14,130,1) 60%,rgba(182,107,174,0.15) 61%,rgba(182,107,174,0.15) 100%);
}
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。</p>
<div id="grad1"></div>
<p><strong>注意:</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
页面效果: