使元素除边框外透明？

Question

Is it possible to make an entire element invisible except for its border or outline using pure CSS? By "invisible", I mean entirely transparent (ie visibility: hidden; or opacity: 0; ) with a visible surrounding border. All text, children, background, et al., would be hidden.

I know this could be accomplished by creating a parent div around the invisible element, but I am curious as to whether or not it would be possible to achieve the same effect without changing the HTML.

Can this be done?

Answer 1

Hmm, I think it is:

HTML

<div id="element">
  ...
</div>

CSS

#element {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

#element * {
  opacity: 0;
}

Answer 2

You could do something like that using child selections.

Example

<div class="box">
  <p>some child content</p>
</div>

.box{
  width: 100px;
  height: 100px;
  border:5px solid black;

}
.box >* {
  opacity: 0;
}

Answer 3

You can use RGBA as color to achieve that, have a look at this:

LIVE DEMO

THE STYLE:

body {
  background: red;
}

div {
  width: 100px;
  height: 60px;
  border: 4px solid black;
  background: rgba(255, 255, 255, 0.2);
}

div * {
  opacity: 0;
}

THE MARKUP:

<div>
    <span>Guten Morgen</span>
</div>