Können Sie die Deckkraft des Rahmens in CSS festlegen?

Question

Gibt es eine geradlinige CSS-Methode, um den Rand eines Elements halbtransparent mit etwas wie diesem zu machen?

border-opacity: 0.7;

Wenn nicht, hat jemand eine Idee, wie ich das ohne Bilder machen kann?

Answer 1

Als alternative Lösung, die Mai Arbeit in einige Fälle: Ändern Sie die border-style a dotted .

Abwechselnde Gruppen von Pixeln zwischen der Vordergrundfarbe und der Hintergrundfarbe sind nicht dasselbe wie eine durchgehende Linie von teilweise transparenten Pixeln. Andererseits erfordert dies deutlich weniger CSS und ist ohne browserspezifische Direktiven viel kompatibler mit jedem Browser.

Answer 2

Man kann auch andere Umrandungsarten in Betracht ziehen ( dashed , dotted ), um den Rahmen teilweise vollständig transparent zu machen:

http://jsfiddle.net/c1rvp3ga

body {
    background: url('http://i.imgur.com/pr86mh.jpg');
}

#foo {
  border: 5px dashed #b00;
  background: #ddd;
  background-clip: padding-box;
  padding: 8px;
  width: 100px;
  margin: 30px;
}

<p id=foo>some content</p>

Answer 3

Andere Antworten befassen sich mit dem technischen Aspekt des Problems der Rahmen-Opazität, während ich einen Hack vorstellen möchte (nur mit CSS und HTML). Erstellen Sie grundsätzlich ein Container-Div mit einem Rahmen-Div und dann dem Inhalts-Div.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

Und dann das CSS: (setzen Sie den Inhaltsrahmen auf "none", achten Sie auf die Positionierung, so dass die Dicke des Rahmens berücksichtigt wird)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

Answer 4

Hier wird ein wenig über den Tellerrand geschaut: Wenn Sie mit SVG-Grundformen können Sie eine Kombination verwenden aus stroke , stroke-width ( Browserunterstützung > 97% ), und stroke-opacity ( Browser-Unterstützung > 99% ), um im Wesentlichen das Gleiche zu tun, worum der Auftraggeber bittet.

Zum Beispiel diese Erklärung:

circle {
    stroke: blue;
    stroke-width: 5px;
    stroke-opacity: 0.4
}

fügt einen durchscheinenden blauen Lichthof um den Rand eines <circle> con #000 füllen.

Dieses JSFiddle bietet eine Demo für verschiedene SVG-Grundformen. Der Fiddle verwendet eine rote fill und blau stroke um einen wesentlichen Unterschied zwischen stroke et border - die Hälfte der stroke-width innerhalb des Umfangs der Grundform liegt.

Dadurch entsteht ein "doppelter Rand" (von außen nach innen für jede Grundform: blau->(blau + rot = lila)->rot), der mit CSS unmöglich zu erreichen wäre. border allein (aber border + outline könnte - siehe das obige JSFiddle für ein Beispiel mit einer <div> ) und schwer zu erreichen (bei radialen Grundformen) mit einer radial-gradient() .

Answer 5

Versuchen Sie dies:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

Und hier kommt unser magisches CSS

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Sehen Sie sich die Demo hier.