html - 线性渐变不适用于 <a> 元素

标签 html css

<分区>

我正在尝试将 CSS 渐变应用于我的 <a>元素。它显然不起作用,我一直在尝试解决它但没有成功。如果必须对问题采取任何措施,我会使用 Chrome。

body {
  margin: 1cm;
}

a {
  padding: 15px 60px 15px 60px;
  text-decoration: none;
  border: 1px solid black;
}

#1button {
  background: rgb(2, 0, 36);
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(12, 12, 125, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

#2button {
  background: rgb(2, 0, 36);
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(232, 51, 55, 1) 35%, rgba(241, 95, 223, 1) 100%);
}
<a id="1button">Button #1</a>
<a id="2button">Button #2</a>

最佳答案

不要使用数字作为您 ID 的第一个字符:

body {
  margin: 1cm;
}

a {
  padding: 15px 60px 15px 60px;
  text-decoration: none;
  border: 1px solid black;
}

#button1 {
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(12, 12, 125, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

#button2 {
  background: linear-gradient(65deg, rgba(2, 0, 36, 1) 0%, rgba(232, 51, 55, 1) 35%, rgba(241, 95, 223, 1) 100%);
}
<a id="button1">Button #1</a>
<a id="button2">Button #2</a>

关于html - 线性渐变不适用于 <a> 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52444776/

上一篇:html - 当打印太长的文本时, Angular 会覆盖文本而不是下一行

下一篇:javascript - ASPxMenu - 单击而不是悬停打开子菜单 (dx :ASPxMenu)

相关文章:

html - angular2中div的网格布局

<td> 元素集的 HTML/CSS 宽度

jquery - 为什么我的 JQuery 不显示在 div 中?

javascript - 如何填充剩余的div?

CSS 关键帧动画回到初始状态

javascript - 如何生成并共享文件?

javascript - jQuery .delay 与 .fadeOut 结合不做任何事情

html - SVG 图像为 :after border without fixed height?

css - 当分辨率低于 768px 时,bootstrap 3 中的响应表加入

html - 添加 margintop 或 bottom 到列表项