css-渐变色矩形

效果图：
在这里插入图片描述

代码：
html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title></title><link rel="stylesheet" style="text/css" href="test.css"></head><body><div class="container"><div class="bg"></div></div></body>
</html>

css:

*{margin: 0;padding: 0;box-sizing: border-box;
}.container{width: 100vw;height: 100vh;background-image: url('https://img0.baidu.com/it/u=3091341499,2856166635&fm=253&fmt=auto&app=138&f=PNG?w=1331&h=500');background-repeat: no-repeat;background-size: cover;display: flex;justify-content: center;align-items: center;
}.bg{width: 500px;height: 45px;background-image:linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));border-top: 1px solid;border-bottom: 1px solid;border-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 stretch;;
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/121898.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！