• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 去掉a标签和按钮加背景图片虚线/阴影完美解决方案

去掉a标签和按钮加背景图片虚线/阴影完美解决方案

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含a标签,按钮,虚线等相关知识,佚名 希望在学习及工作中可以帮助到您

当用户注册都会点击一个a标签更换验证码。当点击后a标签上有个阴影部分。对于喜欢美观的同学却不可容忍!

完美去掉a标签和按钮加背景图片阴影

这是什么原因呢?原来是a标签的href属性惹的祸。

1、仅仅是a标签

我了解的有两种解决办法

其一:对症下药。既然是href引起的。那就去掉href属性

当我们用href=javascript:RefreshCode();只是更新验证码。并没有跳转页面。

只要修改一下也可以完美去掉 给a标签加个onfocus="this.blur()"

当然。如果你想让a标签没有下划线。则:style="text-decoration: none"

完美去掉a标签和按钮加背景图片阴影

而在FF等浏览器中则相对比较容易,直接给标签 a 定义样式 outline:none;就可以了,即:

当然不是。我们可以在页面加载的时候。通过:window.document.links.length(此处window可以省略)来获取页面所有的a标签。然后遍历注册事件。

另为如果你给按钮加了背景图片。会有阴影。

完美去掉a标签和按钮加背景图片阴影

也可以用相同的办法实现

完美去掉a标签和按钮加背景图片阴影

3、如果给img加a标签,那么给a标签加onfocus的同时还要设置img的border属性:border=0

注释掉的句子是添加onfucus=this.blur();效果相同。
然后调用fHideFocus("A");即可把a的虚线框去掉
通过传递不同的参数 可以去掉不同的虚线框比如"BUTTON"可以去掉button的虚线框,但要记住参数要用大写字母

扩展:

A. map area内链接如何消除链接虚线?

这是一个观念上的错误,其实应该在所在map的图片上加以控制,而不是在area内,参考传统办法

B. 关于onFocus

对于牛人来说知识点已是很陈旧。但对于刚接触的朋友却是及时雨,今天正好遇到。故记录于此。知识要靠一点一点积累。

您可能想查找下面的文章:

  • 去掉a标签和按钮加背景图片虚线/阴影完美解决方案
  • css如何实现自定义更为美观的链接提示效果

相关文章

  • 2017-08-06页面重构技能-内容篇
  • 2018-08-23设计的套路:10个小技巧让长表单填写更省事
  • 2018-08-23网易资深视觉设计师:如何系统优化APP?
  • 2018-08-23如何获取设计灵感?你没理解它真正的含义!
  • 2018-08-23Adobe 出了一个超厉害的人工智能黑科技,美工可能要失业!
  • 2017-08-06网页在各种分辨率和浏览器中均可正常显示的方法
  • 2018-08-23高手帮你学规范!iOS和Android规范解析之简易菜单+弹框
  • 2018-08-23Iconfinder 开发了一个超强大的图标在线编辑器!
  • 2018-08-23专业的交互输出文档应该怎么写?高级设计师来教你!
  • 2017-08-26DOM编程艺术第二章

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 实战经验!如何制订能有效提高自己的工作目标?
    • 从幽灵按钮到空心元素,它们一直在流行
    • 新闻风格网站设计实例25个
    • 关于调试CSS跨浏览器样式bug的问题
    • HTML name、id、class 的(格式/应用场景/特性)等区别介绍
    • 优设周报 | Android O 的自适应图标和天价复古 iPhone 7
    • 超全面!色彩无障碍设计之「对比度」的探索
    • 产品需求一直不能落地,还好前辈教我这个流程
    • 高手私藏系列!有哪些能快速提高PPT排版水平的技巧?
    • 科普小课堂!设计师怎样从零开始设计一款APP?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有