当前位置：首页 > 文章列表 > 文章 > 前端 > CSS去除输入框焦点边框教程

CSS去除输入框焦点边框教程

2025-09-01 17:51:52 0浏览收藏

想要移除CSS输入框的焦点样式和轮廓线，本教程为你提供详细的解决方案。核心在于控制`outline`和`box-shadow`属性，直接设置为`none`虽然简单，但需谨慎，避免影响键盘用户的可访问性。不同浏览器处理焦点样式的方式各异，Chrome/Edge常用`box-shadow`，Firefox用`outline`，Safari则有独特光晕效果。建议采用自定义`box-shadow`、`border`或背景色等方式替代默认样式，并添加`transition`提升用户体验。同时，务必进行跨浏览器测试，确保样式在不同浏览器中的一致性，在追求美观的同时，兼顾网站的可访问性和用户体验。

移除输入框焦点样式需谨慎，核心是通过outline: none和box-shadow: none去除默认效果，但应避免完全移除，以免影响键盘导航等可访问性需求。不同浏览器处理方式不同：Chrome/Edge常用box-shadow，Firefox用outline，Safari有独特光晕效果，可通过自定义box-shadow、border或背景色替代默认样式，并添加transition提升体验，同时建议跨浏览器测试确保一致性。

CSS怎么移除焦点_CSS移除输入框焦点样式与轮廓线教程

要移除CSS中输入框的焦点样式和轮廓线，核心在于控制outline和box-shadow这两个CSS属性。浏览器默认的焦点样式通常由outline（轮廓线）或某些浏览器（比如Chrome）的box-shadow（盒阴影）来呈现。直接将它们设置为none是最直接的手段，但这样做务必三思，因为这会影响到键盘用户的可访问性。

解决方案

当我们需要移除或重置输入框（, </code>, <code><select></code>等）在获得焦点时，浏览器自动添加的视觉效果时，通常会用到以下CSS属性。这不是一个简单的“关掉”开关，而是一个需要权衡的决定。</p><p><strong>1. 移除默认轮廓线 (Outline)</strong></p><p>这是最常见也最直接的方法。浏览器的默认焦点轮廓线主要是为了键盘导航用户提供视觉指示。</p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { outline: none; /* 移除默认的焦点轮廓线 */ }</pre><ul><li><strong>思考：</strong> <code>outline</code>和<code>border</code>不同，它不占用盒模型空间，不会引起元素重排。但完全移除它，对于那些不使用鼠标，只依赖键盘或辅助技术的用户来说，会失去当前操作元素的视觉反馈，这在可访问性上是一个大问题。我个人倾向于不直接移除，而是去美化它。</li></ul><p><strong>2. 移除默认盒阴影 (Box-shadow)</strong></p><p>一些现代浏览器，特别是基于Chromium的浏览器（如Chrome、Edge），在元素获得焦点时，除了<code>outline</code>外，还会添加一个蓝色的<code>box-shadow</code>作为焦点指示。</p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { box-shadow: none; /* 移除某些浏览器（如Chrome）的默认焦点阴影 */ }</pre><ul><li><strong>思考：</strong> 结合<code>outline: none;</code>使用时，才能彻底移除这些浏览器的默认焦点样式。单独移除<code>box-shadow</code>可能还会有<code>outline</code>存在。</li></ul><p><strong>3. 移除或修改边框 (Border)</strong></p><p>如果你的焦点样式是表现为边框的变化，那么可能需要修改<code>border</code>属性。这通常发生在自定义了边框，但又不希望焦点时有额外的边框效果。</p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { border-color: transparent; /* 如果默认焦点样式是改变边框颜色 */ border-width: 1px; /* 保持边框宽度，避免元素跳动 */ border-style: solid; /* 保持边框样式 */ }</pre><ul><li><strong>思考：</strong> 直接设置<code>border: none;</code>可能会导致元素在获得焦点时“跳动”或大小变化，因为<code>border</code>是占用盒模型空间的。更稳妥的做法是保持<code>border-width</code>和<code>border-style</code>不变，只修改<code>border-color</code>，或者用<code>transparent</code>。</li></ul><p><strong>4. 针对特定浏览器或元素</strong></p><ul><li><strong>Firefox的<code>::-moz-focus-inner</code>:</strong> 针对Firefox中按钮等元素的内部焦点轮廓。<pre class="brush:language-css;toolbar:false;">button::-moz-focus-inner { border: 0; /* 移除Firefox按钮的内部边框 */ }</pre></li><li><strong>IE的<code>outline</code>:</strong> IE10+的<code>outline</code>行为与标准浏览器一致，但旧版本IE可能需要其他hack。不过现在我们基本不需要考虑旧版IE了。</li></ul><p>总的来说，移除焦点样式是一个双刃剑。我通常建议不要完全移除，而是用自定义的、符合品牌风格的样式来替代，这样既能保持美观，又能兼顾可访问性。</p><h3>为什么不建议完全移除所有焦点样式？</h3><p>这真是一个老生常谈但又不得不提的问题。作为开发者，我们常常追求像素级的完美和视觉上的统一，默认的蓝色或虚线轮廓线确实有点“碍眼”。但话说回来，这些看似丑陋的默认样式，它们的存在是有着深远的意义的，主要就是为了<strong>可访问性（Accessibility）</strong>和<strong>用户体验（User Experience）</strong>。</p><p>想象一下，一个用户因为各种原因无法使用鼠标，他们可能依赖键盘的Tab键来在页面元素之间跳转。当他们按下Tab键时，如何知道当前焦点停留在哪个输入框、按钮或链接上呢？没错，就是那个焦点轮廓线或阴影。如果完全移除了这些视觉指示，那么这个用户基本上就“失明”了，他们不知道自己在哪里，更不知道如何操作。这不仅仅是便利性问题，很多时候是能不能使用网站的问题。</p><p>从法律层面看，许多国家和地区都有关于网站可访问性的法规（比如美国的ADA，国际的WCAG标准），其中明确要求交互元素必须有清晰的焦点指示。这不仅仅是为了“做好事”，也是为了避免潜在的法律风险。</p><p>所以，我的个人观点是，完全移除焦点样式，就像是把汽车的刹车灯拆掉，虽然车尾看起来更简洁了，但安全隐患巨大。我们追求美观是没错，但不能以牺牲核心功能为代价。</p><h3>如何自定义输入框的焦点样式，而不是完全移除？</h3><p>既然完全移除不可取，那么最好的办法就是<strong>自定义</strong>。这就像给你的汽车刹车灯换个更酷炫的LED灯，既美观又实用。自定义焦点样式，不仅能让你的网站在视觉上更统一，还能提升用户体验，同时兼顾可访问性。</p><p>我的做法通常是这样的：</p><ol><li><p><strong>先“清零”再“重塑”：</strong></p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { outline: none; /* 移除默认轮廓线 */ box-shadow: none; /* 移除默认阴影 */ /* 也可以重置默认的边框变化，确保它不会干扰我们的自定义样式 */ border-color: initial; /* 或者设置为你的默认边框颜色 */ }</pre><p>这里先移除了浏览器的默认样式，为我们自定义样式铺平道路。</p></li><li><p><strong>添加自定义视觉指示：</strong> 现在，我们可以用更符合网站设计风格的方式来指示焦点。常用的有：</p><ul><li><p><strong>自定义<code>box-shadow</code>：</strong> 这是我最喜欢的方式，因为它不影响元素布局，而且可以做出非常漂亮的内阴影或外阴影效果。</p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6); /* 蓝色光晕效果 */ border-color: #4299e1; /* 同时改变边框颜色 */ }</pre><p>这里我用了一个半透明的蓝色<code>box-shadow</code>来模拟一个“光晕”效果，同时把边框颜色也改了，这样视觉反馈非常明显。</p></li><li><p><strong>改变<code>border</code>颜色或样式：</strong></p><pre class="brush:language-css;toolbar:false;">input:focus, textarea:focus, select:focus { outline: none; border-color: #007bff; /* 聚焦时边框变为蓝色 */ box-shadow: none; /* 如果不想要阴影 */ }</pre><p>这种方式也很直观，但要注意保持<code>border-width</code>不变，否则会引起元素跳动。</p></li><li><p><strong>改变背景色：</strong> 偶尔也会用，但通常作为辅助手段，因为背景色变化可能不如边框或阴影那么醒目。</p><pre class="brush:language-css;toolbar:false;">input:focus { outline: none; background-color: #f0f8ff; /* 聚焦时背景变为浅蓝色 */ }</pre></li></ul></li><li><p><strong>添加过渡效果（<code>transition</code>）：</strong> 为了让焦点变化更平滑，而不是生硬地跳变，添加一个<code>transition</code>是个好主意。</p><pre class="brush:language-css;toolbar:false;">input, textarea, select { transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } input:focus, textarea:focus, select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); }</pre><p>这样用户体验会好很多，变化看起来更自然。</p></li></ol><p>选择哪种方式取决于你的设计风格和需求，但核心思想是提供一个清晰、可见、且与你的品牌调性一致的焦点指示。</p><h3>不同浏览器对焦点样式的处理有何差异？</h3><p>这块内容，说实话，是前端开发中一个比较头疼但又不得不面对的现实。虽然CSS标准在不断完善，但各个浏览器厂商在实现细节上总会有那么一点点“个性”，尤其是在一些默认样式和用户代理样式表上。对于焦点样式，这种差异尤为明显。</p><p><strong>1. Chrome/Edge (基于Chromium内核):</strong> 这些浏览器通常会给焦点元素添加一个蓝色的<code>box-shadow</code>。这个阴影看起来像是一个发光效果，通常比较醒目。它不占用布局空间，所以不会导致元素跳动。此外，它们也可能有默认的<code>outline</code>，但<code>box-shadow</code>往往更显眼。</p><p><strong>2. Firefox:</strong> Firefox的默认焦点样式通常是<code>outline</code>，可能是一个虚线框，或者一个实线框。它的颜色和粗细可能因操作系统和Firefox版本而异。有时，对于按钮等元素，它还会有一个内部的虚线边框，这需要通过<code>::-moz-focus-inner</code>来控制。</p><p><strong>3. Safari (WebKit/Apple WebKit):</strong> Safari在macOS上，默认的焦点样式也比较独特，经常是一个蓝色的光晕效果，类似于Chrome的<code>box-shadow</code>，但视觉上可能有所不同。在iOS上，焦点样式可能更不明显，或者依赖于系统UI。</p><p><strong>4. 总结差异及应对：</strong></p><ul><li><strong><code>outline</code>与<code>box-shadow</code>的优先级：</strong> 大多数情况下，如果你同时设置了<code>outline: none;</code>和<code>box-shadow: none;</code>，就能覆盖大部分浏览器的默认焦点样式。</li><li><strong>元素类型差异：</strong> 某些元素，如<code><button></code>或<code><select></code>，在不同浏览器中可能会有更复杂的默认焦点样式。例如，Firefox的<code>::-moz-focus-inner</code>就是针对按钮的。</li><li><strong>操作系统影响：</strong> 浏览器的默认样式有时还会受到操作系统主题的影响。例如，在Windows高对比度模式下，焦点样式可能会被系统强制覆盖，以确保可访问性。</li><li><strong>跨浏览器测试：</strong> 正因为有这些差异，进行充分的跨浏览器测试是至关重要的。你不能只在Chrome里看一眼就觉得万事大吉了。至少要在Chrome、Firefox和Safari（如果可能的话，还有Edge）中都检查一下焦点样式，确保它们在视觉上和功能上都符合预期。</li><li><strong>Reset/Normalize：</strong> 很多CSS Reset或Normalize库会包含一些针对焦点样式的重置规则，这有助于提供一个更一致的起点。但我个人更倾向于自己写，因为这样能更精确地控制我想要的效果，而不是一股脑地全部重置。</li></ul><p>理解这些差异，并采取相应的策略（如先移除默认再自定义，并进行充分测试），是确保你的网站在所有用户和所有环境下都能提供良好体验的关键。</p><p>今天关于《CSS去除输入框焦点边框教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于box-shadow,可访问性,浏览器差异,outline,焦点样式的内容请关注golang学习网公众号！</p> </div> <div class="labsList"> <a href="javascript:;" title="box-shadow">box-shadow</a> <a href="javascript:;" title="可访问性">可访问性</a> <a href="javascript:;" title="浏览器差异">浏览器差异</a> <a href="javascript:;" title="outline">outline</a> <a href="javascript:;" title="焦点样式">焦点样式</a> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/303868.html" title="HTML复选框与单选框使用教程" class="img_box"> <img src="/uploads/20250901/175672029568b56ca74463d.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="HTML复选框与单选框使用教程">HTML复选框与单选框使用教程 </a> <dl> <dt class="lineOverflow"><a href="/article/303868.html" title="HTML复选框与单选框使用教程" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">HTML复选框与单选框使用教程</dd> </dl> </div> <div class="cateItem"> <a href="/article/303870.html" title="PHP数组差异对比常用方法解析" class="img_box"> <img src="/uploads/20250901/175672035668b56ce407c70.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="PHP数组差异对比常用方法解析"> </a> <dl> <dt class="lineOverflow"><a href="/article/303870.html" class="aBlack" title="PHP数组差异对比常用方法解析">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">PHP数组差异对比常用方法解析</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/619691.html" class="img_box" title="CSS数字显示统一技巧，OpenType特性应用方法"> <img src="/uploads/20260601/17802914206a1d175ca6b74.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS数字显示统一技巧，OpenType特性应用方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619691.html" class="aBlack" target="_blank" title="CSS数字显示统一技巧，OpenType特性应用方法">CSS数字显示统一技巧，OpenType特性应用方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>209浏览</span> <span class="collectBtn user_collection" data-id="619691" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619689.html" class="img_box" title="PerformanceAPI全生命周期预警指南"> <img src="/uploads/20260601/17802913226a1d16faa9805.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="PerformanceAPI全生命周期预警指南"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619689.html" class="aBlack" target="_blank" title="PerformanceAPI全生命周期预警指南">PerformanceAPI全生命周期预警指南</a> </dt> <dd class="cont2"> <span><i class="view"></i>147浏览</span> <span class="collectBtn user_collection" data-id="619689" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619683.html" class="img_box" title="一个按钮控制多个状态的实现方式"> <img src="/uploads/20260601/17802911266a1d16367332e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="一个按钮控制多个状态的实现方式"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619683.html" class="aBlack" target="_blank" title="一个按钮控制多个状态的实现方式">一个按钮控制多个状态的实现方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>360浏览</span> <span class="collectBtn user_collection" data-id="619683" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619679.html" class="img_box" title="CSSGrid子元素排序技巧分享"> <img src="/uploads/20260601/17802910156a1d15c7e530b.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSSGrid子元素排序技巧分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619679.html" class="aBlack" target="_blank" title="CSSGrid子元素排序技巧分享">CSSGrid子元素排序技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>155浏览</span> <span class="collectBtn user_collection" data-id="619679" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619677.html" class="img_box" title="FIMO支持透明度设置吗？"> <img src="/uploads/20260601/17802909496a1d158569b8e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="FIMO支持透明度设置吗？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619677.html" class="aBlack" target="_blank" title="FIMO支持透明度设置吗？">FIMO支持透明度设置吗？</a> </dt> <dd class="cont2"> <span><i class="view"></i>393浏览</span> <span class="collectBtn user_collection" data-id="619677" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619653.html" class="img_box" title="Web组件开发：CustomElements实战教程"> <img src="/uploads/20260601/17802898596a1d11436d93f.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Web组件开发：CustomElements实战教程"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619653.html" class="aBlack" target="_blank" title="Web组件开发：CustomElements实战教程">Web组件开发：CustomElements实战教程</a> </dt> <dd class="cont2"> <span><i class="view"></i>243浏览</span> <span class="collectBtn user_collection" data-id="619653" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619650.html" class="img_box" title="CSS无限循环背景动画技巧"> <img src="/uploads/20260601/17802897036a1d10a7bcfb8.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS无限循环背景动画技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619650.html" class="aBlack" target="_blank" title="CSS无限循环背景动画技巧">CSS无限循环背景动画技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>116浏览</span> <span class="collectBtn user_collection" data-id="619650" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619644.html" class="img_box" title="CSS文字大小动画不自然怎么优化？"> <img src="/uploads/20260601/17802894386a1d0f9e5c88c.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字大小动画不自然怎么优化？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="javascript:;" class="aLightGray" title="CSS">CSS</a> <a href="javascript:;" class="aLightGray" title="动画">动画</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619644.html" class="aBlack" target="_blank" title="CSS文字大小动画不自然怎么优化？">CSS文字大小动画不自然怎么优化？</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619644" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619634.html" class="img_box" title="清除浮动空白间距的实用技巧"> <img src="/uploads/20260601/17802890356a1d0e0bc8117.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="清除浮动空白间距的实用技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619634.html" class="aBlack" target="_blank" title="清除浮动空白间距的实用技巧">清除浮动空白间距的实用技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>430浏览</span> <span class="collectBtn user_collection" data-id="619634" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619632.html" class="img_box" title="JavaScript前端安全核心问题有哪些？"> <img src="/uploads/20260601/17802889596a1d0dbf97f68.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript前端安全核心问题有哪些？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619632.html" class="aBlack" target="_blank" title="JavaScript前端安全核心问题有哪些？">JavaScript前端安全核心问题有哪些？</a> </dt> <dd class="cont2"> <span><i class="view"></i>109浏览</span> <span class="collectBtn user_collection" data-id="619632" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619631.html" class="img_box" title="自定义图片提交按钮，INPUTTYPE设为IMAGE"> <img src="/uploads/20260601/17802888896a1d0d793af4e.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="自定义图片提交按钮，INPUTTYPE设为IMAGE"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | <a href="javascript:;" class="aLightGray" title="html">html</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/619631.html" class="aBlack" target="_blank" title="自定义图片提交按钮，INPUTTYPE设为IMAGE">自定义图片提交按钮，INPUTTYPE设为IMAGE</a> </dt> <dd class="cont2"> <span><i class="view"></i>179浏览</span> <span class="collectBtn user_collection" data-id="619631" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/619622.html" class="img_box" title="CSS文字压到图片上怎么解决？z-index调整方法"> <img src="/uploads/20260601/17802885336a1d0c151a9a2.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS文字压到图片上怎么解决？z-index调整方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1星期前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/619622.html" class="aBlack" target="_blank" title="CSS文字压到图片上怎么解决？z-index调整方法">CSS文字压到图片上怎么解决？z-index调整方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>126浏览</span> <span class="collectBtn user_collection" data-id="619622" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">543次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">516次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">500次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">485次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box"> <img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt> <dd class="cont1 lineTwoOverflow"> ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd> <dd class="cont2">7559次使用</dd> </dl> </li> <li> <a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box"> <img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt> <dd class="cont1 lineTwoOverflow"> 探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd> <dd class="cont2">7987次使用</dd> </dl> </li> <li> <a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box"> <img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt> <dd class="cont1 lineTwoOverflow"> 可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd> <dd class="cont2">7791次使用</dd> </dl> </li> <li> <a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box"> <img src="/uploads/20251014/176043000368ee07b3159d6.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="星月写作：AI网文创作神器，助力爆款小说速成" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt> <dd class="cont1 lineTwoOverflow"> 星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd> <dd class="cont2">9731次使用</dd> </dl> </li> <li> <a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box"> <img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt> <dd class="cont1 lineTwoOverflow"> MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd> <dd class="cont2">8529次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt> <dd> <span class="left">2025-05-11</span> <span class="right">502浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> <a href="/manual/go/" target="_blank" class="aBlack" title="手册">手册</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/303869.html"/> <input type="hidden" name="__token__" value="f7478879256f091a54cc1590c5764356" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/303869.html"/> <input type="hidden" name="__token__" value="f7478879256f091a54cc1590c5764356" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>