css 从中间向两边颜色渐变到透明

css 从中间向两边颜色渐变到透明

 

background: linear-gradient(to right, rgba(27,201,145,.1) 0%, rgba(27,201,145,.8) 50%, rgba(27,201,145,.1) 100%);

 

https://blog.csdn.net/Li_wen258/article/details/125769842

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变与外发光效果</title>
<style>
  .glowing-container {
    width: 300px;
    height: 200px;
    margin: 50px auto;
    background: linear-gradient(45deg, #ff7e5f, #feb47b); /* 线性渐变背景 */
    border-radius: 15px; /* 圆角效果 */
    box-shadow: 0 0 20px rgba(255, 126, 95, 0.6), /* 外发光效果，颜色与渐变相近 */
                0 0 40px rgba(255, 126, 95, 0.4), /* 更远的模糊阴影，增强发光感 */
                0 0 60px rgba(255, 126, 95, 0.2); /* 更远的轻微阴影，增加深度 */
  }
</style>
</head>
<body>

<div class="glowing-container">
  <!-- 容器内容 -->
  <p>这是一个带有渐变背景和外发光效果的容器。</p>
</div>

</body>
</html>

 

posted @ 2024-12-20 10:01  与f  阅读(1)  评论(0)  编辑  收藏  举报