大家好，今天来介绍css阴影透明度怎么设置(box-shadow属性可以设置)的问题，以下是渲大师小编对此问题的归纳和整理，感兴趣的来一起看看吧！
css设置边框border透明度设置阴影透明度
设置边嫌弯框透明度：
芹山闷 border: 1pxsolidtransparent;
border-color: rgba(151, 151, 151, 0.3);前三个为边框颜色的rgb值，最后一唯笑个为透明度。
设置阴影透明度：box-shadow: 0px 2px 10px rgba(41, 12, 127, 0.2);
.png "css阴影透明度怎么设置(css边框透明色)")
如何设置box shadow的透明度
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
浏览器的兼容：
为了兼容各滚汪主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性册前时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
注意：出于方便，后文的css属性有的地方只写了box-shadow属性，没有写-moz-和-webkit-前缀的形州备清式，在使用中不要忘记加上。
如何设置CSS样式中的透明度
在CSS中我们可以通过给元素添加opacity属性来改变它的透明度，opacity的值为0到1，值越小越透明
在页面中我们常常用到CSS中的一个样式来设置透明度，来美化页面，今天将和大家介绍如何使用CSS中的opacity属性，具有一定的参考价值，希望对大家有所帮助
【推荐课程：CSS课程】
opacity属性
opacity: valueinherit;value：用来设置不透明度。从 0.0 （完全透明）到 1.0（完全不透明）
inherit ：应该从父元素继团乱承 opacity 属性的值
例：
将图片设置为不透明
未设置透明度：
设置了透明度：
效果图如下：
注意：
在IE9, Firefox, Chrome, Opera 浏览器中使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越塌陵档小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)，x 能够取的值从 0 到 100。值越小，越透明。
案例分享
使用opacity属性制作一个若隐若现的向下的箭头
在这个案例中需要使用到CSS3中的animation动画属性，通过设置动画属性的值来规定动画执行的时间以及在动画过程中的透明度变化的设计
.box
{ -webkit-animation:box 5s infinite;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes box
{
from
{
opacity: 0;
}
to
{
opacity: 1;
}
}
效果图如下：
总结：
css中如何设置透明度
1、创建一个html文件。
2、在html文件找到一个标签，在这个标签里创建一个
标签并添加一个类，在这把这个类设置为：rgba。
标签后面创建一个，在标签里设置rgba类的高和背景透明度的样式（rgba(R,G,B,A)）。透明度参数，取值在0~1之间，不可为负值，透明度参数越小透明度越高。</p>
<p>代码：</p>
</p>
<p>.rgba{</p>
<p>background-color: rgba(0,0,0,0.5);</p>
<p>height: 200px;</p>
<p>}</p>
</p>
<p>4、保存后使用浏览器查看。可以看到当姿兄团透明度为由0.1修改为1时div背景由灰色变为了黑色。</p>
<p>5、所有代码。可以把所有代码复制到新建的html文件上，保存好后使用浏览器打开借口看到效果。</p>
<p>所有代码：</p>
</p>
</p>
<p><title>css设置背景透明</p>
</p>
<p>.rgba{</p>
<p>background-color: rgba(0,0,0,0.5);</p>
<p>height: 200px;</p>
<p>}</p>
</p>
</p>
<p><div class="rgba"></div>
</p>
</p>
<h3 id=""></h3>
<div id="xds">
<strong>更多服务器知识文章推荐：</strong>
<ul>
<li><a href="https://gpu.xuandashi.com/102369.html" target="_blank" title="代理服务器设置方法(代理服务器怎么设置完全访问)">代理服务器设置方法(代理服务器怎么设置完全访问)</a>
</li>
<li><a href="https://gpu.xuandashi.com/102305.html" target="_blank" title="cc攻击与ddos区别(cc攻击和ddos攻击哪个比较厉害)">cc攻击与ddos区别(cc攻击和ddos攻击哪个比较厉害)</a>
</li>
<li><a href="https://gpu.xuandashi.com/102358.html" target="_blank" title="vrrp是二层还是三层协议(vrrp协议中定义了哪几种状态)">vrrp是二层还是三层协议(vrrp协议中定义了哪几种状态)</a>
</li>
<li><a href="https://gpu.xuandashi.com/102312.html" target="_blank" title="dhcp是什么协议(dhcp是什么协议的简称其作用是)">dhcp是什么协议(dhcp是什么协议的简称其作用是)</a>
</li>
<li><a href="https://gpu.xuandashi.com/102316.html" target="_blank" title="dns污染怎么解决(dns改成114.114.114有危险吗)">dns污染怎么解决(dns改成114.114.114有危险吗)</a>
</li>
</ul>
</div>
<div class="post-note alert alert-warning" role="alert">
<small>本文标题：<strong><a href="https://gpu.xuandashi.com/81798.html">css阴影透明度怎么设置(css边框透明色)</a></strong><br>
本文地址：https://gpu.xuandashi.com/81798.html，转载请说明来源于：渲大师<br>
<strong>声明：</strong>本站部分内容来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。分享目的仅供大家学习与参考，不代表本站立场！</small>
</div>
<div class="entry-share">
<div class="row justify-content-between align-items-center">
<div class="col-md mt-3">
<button type="button" class="go-star-btn2 btn btn-sm mr-2 btn-outline-warning" data-id="81798"><i class="mdi mdi-star"></i> 收藏</button><button type="button" class="go-poster-img btn btn-sm btn-outline-info mr-2" data-id="81798"><i class="mdi mdi-file-image"></i> 海报</button><button type="button" class="go-copy share-link btn btn-sm btn-outline-info mr-2" data-clipboard-text="https://gpu.xuandashi.com/81798.html"><i class="mdi mdi-content-copy"></i> 分享链接：https://gpu.xuandashi.com/81798.html</button> </div>
<div class="col-auto mt-3">
分享到 : <a rel="nofollow" href="javascript:;" data-share="weixin" data-qr="https://gpu.xuandashi.com/wp-content/themes/riplus/inc/qrcode.php?data=https://gpu.xuandashi.com/81798.html" class="go-share share-weixin"><i class="mdi mdi-wechat"></i></a>
<a rel="nofollow" href="" data-share="qq" class="go-share share-qq"><i class="mdi mdi-qqchat"></i></a>
<a rel="nofollow" href="" data-share="weibo" class="go-share share-weibo"><i class="mdi mdi-sina-weibo"></i></a>
</div>
</div>
</div> </article>
<div class="entry-page">
<div class="row">
<div class="col-lg-6">
<div class="lazyload visible entry-page-prev" data-bg="https://i01piccdn.sogoucdn.com/2a19e101ea25aa78">
<a href="https://gpu.xuandashi.com/79675.html" title="Java创建数组需要哪些步骤(java中数组的三种创建方式)">
<span>Java创建数组需要哪些步骤(java中数组的三种创建方式)</span>
</a>
<div class="entry-page-info">
<span class="float-left"><i class="mdi mdi-chevron-left"></i> 上一篇</span>
<span class="float-right">2023-08-11</span>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="lazyload visible entry-page-next" data-bg="http://img.ajshuma.com/aiimg/苹果电脑截图后存哪里(苹果电脑如何截屏并保存图片).png">
<a href="https://gpu.xuandashi.com/80856.html" title="苹果电脑截图后存哪里(苹果电脑如何截屏并保存图片)">
<span>苹果电脑截图后存哪里(苹果电脑如何截屏并保存图片)</span>
</a>
<div class="entry-page-info">
<span class="float-left">2023-08-11</span>
<span class="float-right">下一篇 <i class="mdi mdi-chevron-right"></i></span>
</div>
</div>
</div>
</div>
</div> <!-- # 标准网格模式... -->
<div class="entry-related-posts">
<h5 class="title mb-3">相关推荐</h5>
<div class="row">
<div class="col-lg-3 col-md-4 col-6">
<div class="post-grid card mb-4">
<div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%"><a rel="nofollow" href="https://gpu.xuandashi.com/76631.html"><img class="lazyload" data-src="https://i04piccdn.sogoucdn.com/f4fe96d934656d5a" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="磁盘管理怎么分区(windows磁盘管理分区)" /> </a></div></div> <div class="entry-body card-body">
<h2 class="entry-title"><a href="https://gpu.xuandashi.com/76631.html" title="磁盘管理怎么分区(windows磁盘管理分区)" rel="bookmark">磁盘管理怎么分区(windows磁盘管理分区)</a></h2><p class="card-text entry-excerpt">1、磁盘管理怎么分区磁盘管理是计算机维护和管理的重要任务之一。对硬盘进行分区是磁盘[...</p> </div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6">
<div class="post-grid card mb-4">
<div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%"><a rel="nofollow" href="https://gpu.xuandashi.com/88095.html"><img class="lazyload" data-src="https://i04piccdn.sogoucdn.com/a24faf76f4c4774a" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="unsigned在c语言中是什么意思(unsigned int和int的区别)" /> </a></div></div> <div class="entry-body card-body">
<h2 class="entry-title"><a href="https://gpu.xuandashi.com/88095.html" title="unsigned在c语言中是什么意思(unsigned int和int的区别)" rel="bookmark">unsigned在c语言中是什么意思(unsigned int和int的区别)</a></h2><p class="card-text entry-excerpt">1、unsigned在c语言中是什么意思在C语言中，unsigned是一种数据类型[...</p> </div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6">
<div class="post-grid card mb-4">
<div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%"><a rel="nofollow" href="https://gpu.xuandashi.com/94312.html"><img class="lazyload" data-src="https://i02piccdn.sogoucdn.com/7fb4eef2bdeeeadf" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="天正电气插件怎么使用" /> </a></div></div> <div class="entry-body card-body">
<h2 class="entry-title"><a href="https://gpu.xuandashi.com/94312.html" title="天正电气插件怎么使用" rel="bookmark">天正电气插件怎么使用</a></h2><p class="card-text entry-excerpt">天正电气插件怎么使用天正电气插件是一款功能强大的电气设计软件，它可以帮助工程师们快[...</p> </div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-6">
<div class="post-grid card mb-4">
<div class="entry-media"><div class="placeholder" style="padding-bottom: 66.666666666667%"><a rel="nofollow" href="https://gpu.xuandashi.com/79190.html"><img class="lazyload" data-src="http://img.ajshuma.com/aiimg/ping请求超时是什么意思(网络请求超时是什么意思?如何解决).png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="ping请求超时是什么意思(网络请求超时是什么意思?如何解决)" /> </a></div></div> <div class="entry-body card-body">
<h2 class="entry-title"><a href="https://gpu.xuandashi.com/79190.html" title="ping请求超时是什么意思(网络请求超时是什么意思?如何解决)" rel="bookmark">ping请求超时是什么意思(网络请求超时是什么意思?如何解决)</a></h2><p class="card-text entry-excerpt">大家好，今天来介绍ping请求超时是什么意思的问题，以下是渲大师小编对此问题的归纳和...</p> </div>
</div>
</div>
</div>
</div>
<div id="comments" class="entry-comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/81798.html#respond" style="display:none;">取消回复</a></small></h3><form action="https://gpu.xuandashi.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">您的电子邮箱地址不会被公开。</span> 必填项已用<span class="required">*</span>标注</p><div class="comment-form-comment"><textarea id="comment" name="comment" class="required" rows="4" placeholder="请输入评论内容..."></textarea></div><div class="comment-form-author"><label for="author"><span class="required">*</span>昵称: </label><input id="author" name="author" type="text" value="" size="30" class="required"></div>
<div class="comment-form-email"><label for="email"><span class="required">*</span>邮箱: </label><input id="email" name="email" type="text" value="" class="required"></div>
<div class="comment-form-url"><label for="url">网址: </label><input id="url" name="url" type="text" value="" size="30"></div>
<div class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" checked="checked" style="display: none;"> 浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。</div>
<div class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="提交" /> <input type='hidden' name='comment_post_ID' value='81798' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</div></form> </div><!-- #respond -->
</div><!-- .comments-area -->
</div>
<div class="widget-area col-lg-3">
<aside class="sidebar">
<div id="custom_html-3" class="widget_text widget widget_custom_html"><h5 class="widget-title">扫码添加渲大师小管家，免费领取渲染插件、素材、模型、教程合集大礼包！</h5><div class="textwidget custom-html-widget"><img width="950" height="991" src="https://gpu.xuandashi.com/wp-content/uploads/2024/04/xdsxgj.jpg" class="image wp-image-23066 attachment-full size-full" alt="" decoding="async" style="max-width: 100%; height: auto;"></div></div><div id="authorinfo-2" class="widget widget_authorinfo"><div class="author-info">
<div class="author-avatar">
<a rel="nofollow" href="https://gpu.xuandashi.com/author/%E6%B8%B2%E5%A4%A7%E5%B8%88" title="渲大师" rel="author">
<img alt='' data-src='//gpu.xuandashi.com/wp-content/uploads/1234/01/1650597236-6cf75866e033d74.png' class='lazyload avatar avatar-80 photo' height='80' width='80' /></a>
</div>
<div class="author-name">
<a href="https://gpu.渲大师.com/author/渲大师" title="文章作者 渲大师" rel="author">渲大师</a><img class="vip-icon" src="https://gpu.xuandashi.com/wp-content/uploads/2022/06/1629858727-b6480068886b8f7.png" title="渲大师">
<span>认证作者</span>
</div>
<div class="author-des">
渲大师凭借行业领先的服务器性能资源及配置，为建筑设计、互动游戏、影视动漫、工业设计、商业广告等多个领域三维内容制作提供云端渲染、高性能计算及技术支持服务。</div>
<div class="profile-stats">
<div class="profile-stats-inner">
<div class="user-stats-item">
<b>60748</b> <span>文章</span>
</div>
<div class="user-stats-item">
<b>361</b> <span>评论</span>
</div>
<div class="user-stats-item">
<b>132</b> <span>回答</span>
</div>
<div class="user-stats-item">
<b>5600</b> <span>粉丝</span>
</div>
</div>
</div>
</div>
</div>
<div id="recent-posts-2" class="widget widget_recent_entries">
<h5 class="widget-title">实时资讯</h5>
<ul>
<li>
<a href="https://gpu.xuandashi.com/102369.html">代理服务器设置方法(代理服务器怎么设置完全访问)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102305.html">cc攻击与ddos区别(cc攻击和ddos攻击哪个比较厉害)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102358.html">vrrp是二层还是三层协议(vrrp协议中定义了哪几种状态)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102312.html">dhcp是什么协议(dhcp是什么协议的简称其作用是)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102316.html">dns污染怎么解决(dns改成114.114.114有危险吗)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102327.html">java软件eclipse安装教程(eclipse ide for java developers安装教程)</a>
</li>
</ul>
</div><div id="tag_cloud-2" class="widget widget_tag_cloud"><h5 class="widget-title">标签</h5><div class="tagcloud"><a href="https://gpu.xuandashi.com/tag/ywfq" class="tag-cloud-link tag-link-10 tag-link-position-1" style="font-size: 22pt;" aria-label="云服务器 (263个项目)">云服务器</a>
<a href="https://gpu.xuandashi.com/tag/bh" class="tag-cloud-link tag-link-11 tag-link-position-2" style="font-size: 8pt;" aria-label="拨号 (6个项目)">拨号</a>
<a href="https://gpu.xuandashi.com/tag/%e8%85%be%e8%ae%af%e4%ba%91" class="tag-cloud-link tag-link-13 tag-link-position-3" style="font-size: 10.675159235669pt;" aria-label="腾讯云 (13个项目)">腾讯云</a>
<a href="https://gpu.xuandashi.com/tag/aly" class="tag-cloud-link tag-link-12 tag-link-position-4" style="font-size: 18.700636942675pt;" aria-label="阿里云 (111个项目)">阿里云</a></div>
</div></aside> </div>
</div>
</div> </main><!-- #main -->
<footer class="site-footer">
<div class="footer-widget hidden-sm">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md">
<div class="footer-info">
<div class="logo mb-4">
<img class="logo" src="https://gpu.xuandashi.com/wp-content/themes/riplus/assets/img/dibulogo.png" alt="渲大师博客">
</div>
<p class="desc mb-0">渲大师是一家GPU基础算力服务提供商，专注于人工智能领域、深度学习、GPU高性能计算等产品，为全球客户提供高性价比、高算力、快速稳定的基础设备租赁及解决方案服务。</p>
</div>
</div>
<!-- .col-md-2 end -->
<div class="col-lg-9 col-auto widget-warp">
<div class="d-flex justify-content-xl-between">
<div id="recent-posts-3" class="widget widget_recent_entries">
<h5 class="widget-title">热门文章</h5>
<ul>
<li>
<a href="https://gpu.xuandashi.com/102369.html">代理服务器设置方法(代理服务器怎么设置完全访问)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102305.html">cc攻击与ddos区别(cc攻击和ddos攻击哪个比较厉害)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102358.html">vrrp是二层还是三层协议(vrrp协议中定义了哪几种状态)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102312.html">dhcp是什么协议(dhcp是什么协议的简称其作用是)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102316.html">dns污染怎么解决(dns改成114.114.114有危险吗)</a>
</li>
<li>
<a href="https://gpu.xuandashi.com/102327.html">java软件eclipse安装教程(eclipse ide for java developers安装教程)</a>
</li>
</ul>
</div><div id="custom_html-2" class="widget_text widget widget_custom_html"><h5 class="widget-title">联系方式</h5><div class="textwidget custom-html-widget"><p>邮箱：marketing@finovy.com</p>
<p class="workTime">周一至周日10：00-18：30</p>
<p><img src="https://gpu.xuandashi.com/wp-content/uploads/2023/02/ema.png" alt="渲大师客服" style="margin-left: 10px; margin-right: 10px;"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652874327-0c2e811de53efee.png" alt="渲大师客服"></p>
<p style="font-size: 12px;"> 微信公众号 客服微信</p></div></div> </div>
</div>
</div>
</div>
</div>
<div class="footer-copyright d-flex">
<div class="container">
<p>Copyright © 2022 <a href="https://gpu.xuandashi.com/">渲大师GPU租用平台</a> - <a href="https://beian.miit.gov.cn" target="_blank" rel="noreferrer nofollow">粤ICP备2023105524号</a></p>
<ul class="link-footer-bottom hidden-sm"><li><a id="___szfw_logo___" href="https://credit.szfw.org/" rel="nofollow" target="_blank"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652927882-58b12912320f81a.gif" border="0" style="height:41px" alt="深圳工商信息查询"></a></li>
<li><a href="http://www.12377.cn/" rel="nofollow" target="_blank"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652928002-97ce9fa9e3a4668.png" alt="违法和不良信息举报中心"></a></li>
<li> <a href="http://www.cyberpolice.cn/wfjb/html/index.shtml" rel="nofollow" target="_blank"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652928021-1b8d29cc74eb1df.png" alt="网络110报警服务"></a></li>
<li><a target="_blank" rel="nofollow" href="http://www.isc.org.cn/"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652928040-135fd64b22c304c.png" alt="中国互联网协会"></a></li>
<li><a href="http://www.itrust.org.cn/" rel="nofollow" target="_blank"><img src="https://gpu.xuandashi.com/wp-content/uploads/2022/05/1652928088-38154229570083b.png" alt="中国互联网协会信用评价中心"></a></li></ul>
<p class="m-0 small text-muted">SQL 请求数：71 次<span class="sep"> | </span>页面生成耗时：1.29 秒</p> <p>总访问量：<span style="color:#7df1ff">19444654</span> 今日访问量：<span style="color:#7df1ff">20474</span> 您是今天第：<span style="color:#7df1ff">20474</span> 位访问者</p> </div>
</div>
</footer><!-- #footer -->
<div class="rollbar">
<div class="rollbar-item active" data-action="omnisearch-open" data-target="#omnisearch" data-toggle="tooltip" data-placement="left" title="" data-original-title="搜索"><a href=""><i class="mdi mdi-magnify"></i></a>
</div>
<div class="rollbar-item back-to-top" data-toggle="tooltip" data-placement="left" title="返回顶部"><i class="mdi mdi-arrow-up-thick"></i></div>
</div>
</div><!-- #page -->
<div id="omnisearch" class="omnisearch">
<div class="container">
<!-- Search form -->
<form class="omnisearch-form" method="get" action="https://gpu.xuandashi.com/">
<div class="form-group">
<div class="input-group input-group-merge input-group-flush">
<div class="input-group-prepend">
<span class="input-group-text"><i class="mdi mdi-magnify"></i></span>
</div>
<input type="text" class="search-ajax-input form-control" name="s" value="" placeholder="输入关键词自动检索或回车" autocomplete="off">
</div>
</div>
</form>
<div class="omnisearch-suggestions">
<div class="search-keywords">
<a href="https://gpu.xuandashi.com/xrjc/mayajm" class="tag-cloud-link tag-link-19 tag-link-position-1" style="font-size: 14px;">maya建模教程</a>
<a href="https://gpu.xuandashi.com/tag/ywfq" class="tag-cloud-link tag-link-10 tag-link-position-2" style="font-size: 14px;">云服务器</a>
<a href="https://gpu.xuandashi.com/gpuzs" class="tag-cloud-link tag-link-4 tag-link-position-3" style="font-size: 14px;">GPU服务器知识</a>
<a href="https://gpu.xuandashi.com/xrjc/yxr" class="tag-cloud-link tag-link-16 tag-link-position-4" style="font-size: 14px;">云渲染</a>
<a href="https://gpu.xuandashi.com/wfqzs/vpszs" class="tag-cloud-link tag-link-5 tag-link-position-5" style="font-size: 14px;">VPS服务器知识</a>
<a href="https://gpu.xuandashi.com/xrjc/3dmaxxr" class="tag-cloud-link tag-link-17 tag-link-position-6" style="font-size: 14px;">3dmax渲染</a>
<a href="https://gpu.xuandashi.com/bkzs" class="tag-cloud-link tag-link-20 tag-link-position-7" style="font-size: 14px;">百科知识</a>
<a href="https://gpu.xuandashi.com/wfqzs/yzs" class="tag-cloud-link tag-link-6 tag-link-position-8" style="font-size: 14px;">云服务器知识</a> </div>
<h6 class="heading">随机推荐</h6>
<div class="row">
<div class="col-12">
<ul id="search-ajax-res" class="list-unstyled mb-0">
<li><a class="list-link" target="_blank" href="https://gpu.xuandashi.com/21052.html"><i class="mdi mdi-orbit"></i>日本云服务器哪家好(日本云服务器哪家好,1对1服务!)<span> 2022-10-01</span></a></li><li><a class="list-link" target="_blank" href="https://gpu.xuandashi.com/94751.html"><i class="mdi mdi-orbit"></i>java堆和栈分别存放什么<span> 2024-04-02</span></a></li><li><a class="list-link" target="_blank" href="https://gpu.xuandashi.com/38609.html"><i class="mdi mdi-orbit"></i>美国云服务器速度慢是什么原因(美国云服务器速度慢是什么原因造成的)<span> 2022-12-11</span></a></li><li><a class="list-link" target="_blank" href="https://gpu.xuandashi.com/67816.html"><i class="mdi mdi-orbit"></i>香港服务器带宽为什么这么贵
(香港服务器带宽为什么这么贵啊)<span> 2023-04-04</span></a></li><li><a class="list-link" target="_blank" href="https://gpu.xuandashi.com/76528.html"><i class="mdi mdi-orbit"></i>xml格式怎么转换excel(开票明细导出来是XML转excel)<span> 2023-07-09</span></a></li> </ul>
</div>
</div>
</div>
</div>
</div>
<nav class="m-menubar">
<ul>
<li class=""><a rel="nofollow" href="https://gpu.xuandashi.com"><i class="mdi mdi-home"></i>首页</a><li class=""><a rel="nofollow" href="https://gpu.xuandashi.com/wfqzs"><i class="mdi mdi-flash-circle"></i>服务器知识</a><li class=""><a rel="nofollow" href="https://gpu.xuandashi.com/gpuzl"><i class="mdi mdi-camera-metering-partial"></i>GPU租赁</a><li class=""><a rel="nofollow" href="https://gpu.xuandashi.com/gpusl"><i class="mdi mdi-caps-lock"></i>GPU算力</a><li class=""><a rel="nofollow" href="https://gpu.xuandashi.com/user"><i class="mdi mdi-account-tie"></i>用户中心</a> </ul>
</nav><script type='text/javascript' src='https://gpu.xuandashi.com/wp-content/themes/riplus/assets/js/popper.min.js?ver=1.16.0' id='popper-js'></script>
<script type='text/javascript' src='https://gpu.xuandashi.com/wp-content/themes/riplus/assets/js/bootstrap.min.js?ver=4.4.1' id='bootstarp-js'></script>
<script type='text/javascript' src='https://gpu.xuandashi.com/wp-content/themes/riplus/assets/js/plugins.js?ver=2.6' id='plugins-js'></script>
<script type='text/javascript' id='app-js-extra'>
/* <![CDATA[ */
var riplus = {"site_name":"\u6e32\u5927\u5e08\u535a\u5ba2","home_url":"https:\/\/gpu.xuandashi.com","ajaxurl":"https:\/\/gpu.xuandashi.com\/wp-admin\/admin-ajax.php","is_singular":"1","is_lightgallery":"0","pay_type_html":{"html":"<div class=\"pay-button-box\"><div class=\"pay-item\" id=\"alipay\" data-type=\"1\"><i class=\"alipay\"><\/i><span>\u652f\u4ed8\u5b9d<\/span><\/div><\/div>","alipay":1,"weixinpay":0,"paypal":0}};
/* ]]> */
</script>
<script type='text/javascript' src='https://gpu.xuandashi.com/wp-content/themes/riplus/assets/js/app.js?ver=2.6' id='app-js'></script>
<script type='text/javascript' src='https://gpu.xuandashi.com/wp-includes/js/comment-reply.min.js?ver=5.8.3' id='comment-reply-js'></script>
</body>
</html>
代码：
3、为div添加样式。在