CSS3 样式问题

Question

我创建了一个标签，但是右侧箭头后面有白色背景。

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
 }

如何移除标签右侧的白色背景？该标签的背景为渐变样式。

http://jsfiddle.net/eR8Ye/5/

- user270014

Answer 1

你可以解决这个问题。 http://jsfiddle.net/eR8Ye/4/ 步骤如下：

1. 从父元素中移除右侧填充。
2. 从 ::after 中移除背景颜色。
3. 将 ::after 定位在父元素外部，向右侧（使用负值）。

- Tom Pietrosanti

---

我也这么认为，但问题在于按钮上的渐变色（这不在fiddle中，只在问题中）。因此，除了您的答案之外，您还需要具有渐变边框。 - René

哦，我之前没看到过这个...我认为你不能在边框颜色上使用渐变。相反，你可以反转你的三角形，将其用作遮罩（使当前透明部分与背景颜色相同，当前有颜色的部分透明）。 - Tom Pietrosanti

注意：您仍然可以在父元素上设置 padding-right，但它只能是10像素而不是原来的20像素（因为 ::after 右侧的边框大小为10像素，适合原始的20像素，所以您只需要再加上10像素即可获得原始外观）。 - Andy Mudrak

谢谢。它在Firefox中显示箭头的边框，但在Chrome中没有。我该如何在Firefox中也去掉这个边框？ - user270014

箭头在我的火狐浏览器（Mac上的v22）中看起来很好。可能只是你的版本不支持透明边框？ - Tom Pietrosanti

Answer 2

将箭头向右移动并使其 background: transparent

Fiddle

- AnilkaBobo

---

如果在Firefox中显示箭头的边框但在Chrome中没有，我该如何从Firefox中删除此边框？谢谢。 - user270014

我不太明白。对我来说，在两个浏览器中看起来都一样。 - AnilkaBobo

Answer 3

将:after的background改为与其父元素相同的背景颜色。示例: http://jsfiddle.net/eR8Ye/2/

无法使其透明。

- Mooseman

---

虽然这样做可以起作用，但您只能在知道父元素的背景颜色的情况下使用。 - user142162

是的，但这是“:after”的限制。CSS变量可以使用，但我现在不会依赖它们。 - Mooseman

@user270014 没有任何办法只使用CSS来实现这个。无论是 background:transparent 还是 background:inherit 都不起作用。 - Mooseman

Answer 4

您可以通过以下3个步骤获得所需结果。

1- 从::after中删除背景
2- 将::after的定位更改为-10px
3- 从tag类中删除右侧填充的10px

编辑

关于您问题中的渐变方面，您可以更新您的Fiddle以向我们展示您遇到的确切问题。 这个问题可能会给您提供需要的答案。

- PTD

---

汤姆的答案与他的设计填充不匹配，而我的匹配。 - PTD

谢谢。在Firefox中，它显示箭头的边框，但在Chrome中却没有。我该如何同时从Firefox和Chrome中移除这个边框？ - user270014

我不确定你的意思。我刚在Chrome、Firefox和IE中查看了一下，它们在我的电脑上看起来是完全一样的。 - PTD

在Firefox中，此标签的右侧有不同颜色的边框，但在Chrome中没有。 - user270014

在使用 Fiddle 进行试验后，我认为 CSS border-image 可能是您尝试实现目标的最佳选择。但它目前不支持 IE。 - PTD