Quotes should look different from spoilers [duplicate]

The spoiler feels very 1998. It reminds me of the <marquee> tag, but I like it.

I think the current spoiler-guard

If you saw this text before you knew this was supposed to be hidden I haven't done my job.

isn't clear what it is. At first it just looks like the poster made a mistake and left a blank box.

The spoiler shouldn't reveal what is under it on flyover. It should require a click.

It should be clearer that it hides some information from the UI at a first glance. Gray can would work well against black text. Stripes help indicate it is a type of "scratchable screen" -

Don't look now, but CSS 3 supports candy stripes

<style>
.spoiler {
  background:repeating-linear-gradient(
  135deg,
  #fff,
  #fff 15px,
  #eee 15px,
  #eee 20px
  );
}
</style>
<p class="spoiler">
    some spoiler text
</p>

As @muru notes in the comments, this can be done by user styles; small snippets of CSS which can be added to a webpage with an extension like Stylus. The first block below adds a quotation mark to blockquotes; the second one changes the background of a spoiler block to the 'scratchable screen surface' from @bobobobo's answer.

blockquote:not([class=""]):not(.spoiler) > p::before {
    content: "“";
    font-weight: bold;
    padding-right: 10px;
}

blockquote[class=""], blockquote.spoiler {
    background:repeating-linear-gradient(
        135deg,
        #fff,
        #fff 15px,
        #eee 15px,
        #eee 20px
    );
    border-left: 2px solid #bbb;
}

Results (after I clicked on the spoiler in your question):

Probably somebody with more CSS skills / better ideas than me can make something nicer. In particular, I'd like the quotation marks to become larger without increasing the height of single-line blockquotes (which is what happens if you add e.g. font-size: 2em).

The main trick here is that a blockquote element for a quote has no class attribute at all, while a spoiler has class="spoiler" before clicking and class="" after; that's the only CSS-accessible way to distinguish them.

There are other browser extensions which can do CSS enhancements; I'd avoid Stylish for reasons mentioned here.

If you need a CSS-based solution to disable spoilers altogether, as mentioned by @Nat in the comments, you'd need something like this:

.spoiler:not(:hover) > * {
    opacity: 1;
}
.spoiler:not(:hover) {
    color: inherit;
}

It looks like a new CSS update just implemented this feature request:

Blockquotes don't have the yellow background anymore, and the background for spoilers has been changed to a light gray.