css 背景渐变填充指定宽度

最新推荐文章于 2023-07-07 16:05:03 发布

＊且听风吟

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量501

点赞数

分类专栏： # CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/hh18700418030/article/details/130759903

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

该代码示例展示了如何用CSS为一个div元素创建从左到右的线性渐变背景，模拟进度条的效果。通过设置`linear-gradient`属性，渐变从rgba(125,54,255,0.8)开始，到rgba(182,107,174,0.15)结束，并在60%的位置达到最大颜色深度。此效果在InternetExplorer8及更早版本中不被支持。

摘要由CSDN通过智能技术生成

给一个 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>