相关疑难解决方法(0)

我正在尝试使用css悬停在缩略图上进行转换,以便在悬停时,背景渐变淡入.转换不起作用,但如果我只是将其更改为rgba()值,则可以正常工作.是否不支持渐变？我也尝试使用图像,它也不会转换图像.

我知道这是可能的,就像在另一篇文章中有人做过的那样,但我无法弄清楚究竟是怎么回事.任何帮助>这里有一些CSS可以使用:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position: absolute;
  width: 200px;
  height: 150px;
  border: 1px #000 solid;
  margin: 30px;
  z-index: 2
}

#container div a:hover {
  background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4)))
}

假设我有以下CSS:

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

我的标记是:

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>
</div>

我的问题是上面的CSS是否转化为:

body {
  color: blue;
}
div {
  color: green;
}
#alert{
  color: red;
}

还是有额外的

* {
  color: red;
}

没有变量,通用选择器在所有元素上应用相同的CSS.这会改变,造型又取决于元素吗？

我还有一个问题是如果:root转换为bodyCSS. …

来自CSS工作组的帖子:

自定义属性不仅仅用于变量[...]

与许多人的想法相矛盾(见本文),这篇文章不仅证实了变量和自定义属性不是同一个东西,而且自定义属性可以用于除变量之外的其他东西.

我的问题是关于最后一部分.有没有人遇到过一些CSS代码,其中自定义属性用于变量之外的其他东西？

我最近访问了StuffAndNonsense.co.uk网站，这是数字设计师 Andy Clarke 的个人网站。我对此感到惊讶，使用我什至不知道存在的网页技术。

我查看了样式并发现了这一点：

:root {
    --font-family: tondo_rg,sans-serif;
    --font-family-light: tondo_lt,sans-serif;
    --font-family-bold: tondo_bd,sans-serif;
    --font-weight: 400;
    --font-size-xxx-display: 8vmin;
    --font-size-xx-display: 4.11rem;
    --font-size-x-display: 3.653rem;
    --font-size-display: 3.247rem;
    --font-size-xxxx-large: 2.887rem;
    --font-size-xxx-large: 2.027rem;
    --font-size-xx-large: 1.802rem;
    --font-size-x-large: 1.602rem;
    --font-size-large: 1.424rem;
    --font-size-medium: 1.266rem;
    --font-size: 1.125rem;
    --font-size-small: 1rem;
    --font-size-x-small: .889rem;
    --font-size-xx-small: .79rem;
    --lineheight-text: 1.5;
    --lineheight-heading: 1.3;
    --color-background: #fff;
    --color-background-selection: #f0f2f3;
    --color-border: #cacfd5;
    --color-text-default: #0b1016;
    --color-text-alt: #95a0ac;
    --color-base: #f4f5f6;
    --color-accent: #ba0d37;
    --color-logo-enamel: #ba0d37;
    --color-logo-highlight: #fdfdfd;
    --color-logo-metal: #cacfd5;
    --color-logo-lettering: #fff;
    --color-logo-type: #0b1016;
    --color-text-link: #2c4159;
    --color-text-link-active: var(--color-text-link);
    --color-text-link-focus: var(--color-text-link);
    --color-text-link-hover: var(--color-accent); …