情不知从何起,一往而情深
排名
6
文章
199
粉丝
4
评论
3
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

好看的渐变色div效果,橙色渐变效果

895人阅读 2024/9/21 9:37 总访问:1110411 评论:0 收藏:0 手机
分类: 前端

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div class="highlight-div">内容</div>
  10. </body>
  11. </html>
  12. <style>
  13. .highlight-div {
  14. width: 200px;
  15. /* 或其他宽度 */
  16. height: 100px;
  17. /* 或其他高度 */
  18. background: linear-gradient(to right, #ff7e5f, #feb47b);
  19. /* 从左到右的渐变色 */
  20. /* 如果想要垂直渐变,可以使用 to bottom */
  21. color: #fff;
  22. /* 文字颜色 */
  23. display: flex;
  24. align-items: center;
  25. /* 垂直居中 */
  26. justify-content: center;
  27. /* 水平居中 */
  28. /* 其他样式,如边框、圆角等 */
  29. border-radius: 10px;
  30. /* 圆角 */
  31. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  32. /* 阴影效果,可选 */
  33. }
  34. </style>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

div+CSS网页布局常用的一些基础知识整理

一.文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print...

干货!div滚动到一定位置就固定他。Vue中实现一侧滚动到底部就固定

尊重原创:转载请注名出处div滚动到一定位置就固定他,例如左边的内容很多,右边的内容很少,如果不处理滚动到一定位置后右...

css div水平居 。文字垂直居中 。flex的方式实现div的垂直与水平居中。布局模板

DIV等元素水平居中定宽度+margin:top auto可以让一个块级别元素在外层居中例如这样:效果:可以看到这个div已经居中了但是...

图片在一个div内容水平与垂直居中

图片宽度与高度设置成80%,然后设置margin-top:10%,margin-left:10%就可以了感觉应该没有这么简单哇,不过反正就是可以了,...

div跟随与div拖动

div跟随,就是一个鼠标移动事件html:&lt;divid=&quot;playbox&quot;class=&quot;box&quot;&gt; 不要跟着我 &lt;/div&gt;j...

js键盘移动div与背景滚动效果

通过键盘按下事件记录按键如果按下的时候就去移动div位置,就不能使用组合键了,不能让div斜着走了,所以只做一个按键记录就...

去掉百度编辑器div被替换成p标签

百度编辑器默认会把div替换成p标签,这样我们在编写一些自定义模板的时候就会改变我们的结构,造成一些问题。解决方法:在u...

div 自适应高度,自动填充剩余高度

方案1:&lt;divclass=&quot;outer&quot;&gt; &lt;divclass=&quot;A&quot;&gt;头部&lt;/div&gt; &lt;divclass=&quot;B&quo...

jquery 获取一个div内容本身的高度

很简单,把内容再加个嵌套,获取嵌套的高度就可以了,嵌套的高度等于内容的高度。举例://假设以下div1是带滑动条的块&lt;d...

div嵌套div自适应增高

div嵌套div里面div一旦使用浮动,外层div是无法自增高的,但是一般只有设置了背景图片才会出现这种问题就像这样可以看到高...

bootstrap div垂直居中

code:&lt;!DOCTYPEhtml&gt; &lt;html&gt; &lt;head&gt; &lt;metacharset=&quot;UTF-8&quot;&gt; &lt;metaname=&quot;vi...

jquery 找到显示与隐藏的div

jquery 找到显示的divvardivs=$(&quot;div:hidden&quot;);jquery 找到隐藏的div$(&quot;div:visible&quot;);

设置div点击域隐藏div

直接上代码//监听全部全部鼠标事件$(document).mouseup(function (e) { var con = $(&quot;div&quot;); // 设...

layer表格点击事件悬浮div(更新修改一下错误)

效果图首先说说需求,点击表格某一列显示详情layertable有个监听事件event有两种方式触发,第一种是按钮也就是操作一栏,这...