请问进度条样式怎么修改？
来源：3-14 编程练习
慕桂英8455924
2020-03-28 17:12:20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 完成任务80%：<progress max="100" value="80" height="40px"></progress> </body> </html>
写回答
1回答
-
同学你好，因为有的样式需要设置兼容性，有一点麻烦，所以老师给你写一个例子了解一下即可，实际开发中不常用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
progress {
width: 260px;
height: 10px;
border: 1px solid #ccc;
border-radius: 10px;
}
progress::-webkit-progress-bar {
background: #e6e6e6;
border-radius: 10px;
}
progress::-webkit-progress-value {
background: #0064B4;
border-radius: 10px;
}
</style>
</head>
<body>
<progress max="100" value="80"></progress>
</body>
</html>
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题