首页 > 其他分享 >css 从中间向两边颜色渐变到透明

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

时间:2024-12-20 10:25:17浏览次数:3  
标签:透明 27 rgba 渐变 126 css 255

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>

 

标签:透明,27,rgba,渐变,126,css,255
From: https://www.cnblogs.com/fps2tao/p/18618555

相关文章

  • css3的动画你觉得难吗?为什么?
    CSS3的动画功能为前端开发带来了丰富的动态效果和交互体验。关于CSS3动画的难度,这实际上取决于个人的经验、技能水平和具体需求。以下是对CSS3动画难度的一些观点:基础入门相对简单:对于已经熟悉CSS的前端开发者来说,CSS3动画的基础入门并不困难。例如,通过简单的属性如transition和......
  • 使用css画一个椭圆
    在CSS中,你可以使用border-radius属性配合宽度和高度的不同值来创建一个椭圆形状。以下是一个简单的示例:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0&qu......
  • CSS学习记录17
    CSS圆角通过CSSborder-radius属性,可以实现任何元素的“圆角”样式。CSSborder-radius属性用于定义元素角的半径。使用此属性可以为元素添加圆角。#rcorners1{border-radius:25px;background:#73AD21;padding:20px;width:200px;height:150px;}......
  • 使用可解释人工智能(Explainable AI, XAI)提高医疗影像诊断的透明度
    ......
  • 多个好看的css动态特效按钮效果代码
    下面这些CSS按钮特效代码因其独特的设计和交互性,适用于多个现代数字界面和用户体验领域。概括而言,开发者可以将这段代码应用于以下领域:网页设计与开发:在构建网站时,这些按钮可以用于导航栏、表单提交、购物车结账等关键位置,吸引用户点击并提升整体视觉效果。移动应用界面:对于移......
  • 配置ubuntu做路由器脚本,配置linux系统做路由器脚本,trojan透明代理配置.
    以下脚本在ubuntu18.04上测试成功,不兼容iptables被替换成nftables的版本。 透明代理在家庭网络和企业网络中都得到了广泛的应用,尤其是在网络安全和性能优化方面。优点:无需客户端配置:客户端不需要进行任何设置,代理是由路由器自动处理的。可用于流量监控与管理:透明代理可以......
  • HTML开发 - CSS 风格基本语法解析
    什么是CSSCSS(层叠样式表,CascadingStyleSheets)用于控制网页的外观和布局。通过CSS,可以控制HTML元素的样式,如颜色、字体、布局、间距等CSS基本语法CSS的基本语法包括选择器、属性和属性值。它的基本结构如下:~~~cssselector{property:value;}~~~1.选......
  • 使用css画一个半透明的吸管
    在前端开发中,使用CSS来画一个半透明的吸管是一个有趣且富有挑战性的任务。由于CSS主要用于样式设置,而不是复杂的图形绘制,因此我们将使用一些基本的形状和技巧来模拟吸管的外观。以下是一个简单的示例,展示了如何使用CSS来创建一个半透明的吸管效果:<!DOCTYPEhtml><htmllang="en......
  • 说说你对CSS Painting API的理解
    CSSPaintingAPI是CSS的一个新功能,它允许前端开发者通过JavaScript来动态地绘制图像和图形,并将这些自定义的绘制内容作为CSS背景、边框等样式的一部分。这一功能大大增强了CSS的表现力,并为前端开发带来了更多的灵活性和创造性。以下是我对CSSPaintingAPI的详细理解:一、基本概......
  • 169. 大学生HTML5期末大作业 ―【鲸鱼动物主题精品网页 (5页)】 Web前端网页制作 html5+
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页!Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等,更多优质博客文章、网......