Kun je een randdekking instellen in CSS?

Is er een eenvoudige CSS-manier om de rand van een element semi-transparant te maken met zoiets als dit?

border-opacity: 0.7;

Zo niet, heeft iemand een idee hoe ik dit kan doen zonder afbeeldingen te gebruiken?

Antwoord 1, autoriteit 100%

Helaas maakt het opacity-element het hele element (inclusief eventuele tekst) semi-transparant. De beste manier om de rand semi-transparant te maken is met het rgba-kleurformaat. Dit zou bijvoorbeeld een rode rand geven met een dekking van 50%:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

Het probleem met deze aanpak is dat sommige browsers het rgba-formaat niet begrijpen en helemaal geen rand zullen weergeven als dit de hele verklaring is. De oplossing is om twee grensaangiften aan te leveren. De eerste met een valse dekking, en de tweede met de werkelijke. Als een browser daartoe in staat is, zal hij de tweede gebruiken, zo niet, dan zal hij de eerste gebruiken.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

De eerste grensdeclaratie heeft dezelfde kleur als een 50% ondoorzichtige rode rand op een witte achtergrond (hoewel afbeeldingen onder de rand niet doorschijnen).

UPDATE:ik heb “background-clip: padding-box;” toegevoegd op dit antwoord (volgens de suggestie van SooDesuNe in de opmerkingen) om ervoor te zorgen dat de rand transparant blijft, zelfs als een effen achtergrondkleur wordt toegepast.

Antwoord 2, autoriteit 21%

Het is gemakkelijk, gebruik een effen schaduw met 0 offset:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Als je een randradius voor het element instelt, krijg je ook mooie ronde randen

jsFiddle-demo

Antwoord 3, autoriteit 2%

Zoals anderen al hebben gezegd: CSS-3 zegt dat je de syntaxis rgba(...)kunt gebruiken om een randkleur te specificeren met een dekkingswaarde (alfa).

hier is een snel voorbeeldals je het wilt controleren.

• Het werkt in Safari en Chrome (werkt waarschijnlijk in alle webkit-browsers).

• Het werkt in Firefox

• Ik betwijfel of het überhaupt werkt in IE, maar ik vermoed dat er een filter of gedrag is waardoor het werkt.

Er is ook deze stackoverflow-post, die enkele andere problemen suggereert– namelijk dat de rand bovenop elke achtergrondkleur (of achtergrondafbeelding) wordt weergegeven die u hebt opgegeven; waardoor het nut van border alpha in veel gevallen wordt beperkt.

Antwoord 4

Als u uw CSS-codering controleert met W3C-validator, zult u zien of uw CSS-code acceptabel is, zelfs als deze in de belangrijkste browsers werkte.

Een transparante rand maken via CSS, zoals hierboven beschreven,

border: 1px solid rgba(255, 0, 0, .5);

wordt niet geaccepteerd door W3C-standaarden, zelfs niet voor CSS3. Ik heb de directe invoervalidator gebruikt met de volgende CSS-code,

.test { border: 1px solid rgba(255, 0, 0, .5); }

De resultaten waren,

Waardefout: rand Te veel waarden of waarden worden niet herkend:
1px solide rgba(255,0,0,0.5 )

Helaas dat de alfa-waarde (de letter “a” aan het einde van “rgb”) door W3C nog niet wordt geaccepteerd als onderdeel van de randkleurwaarden. Ik vraag me wel af waarom het niet gestandaardiseerd is, aangezien het in alle browsers werkt. Het enige probleem is of je je aan de W3C-standaarden wilt houden of er afstand van wilt doen om iets in CSS te maken.

Om W3C online CSS-validator / Directe invoerte gebruiken.

Het is altijd een goed idee om een validator te gebruiken om je werk te controleren, het helpt echt om kleine of zelfs grote fouten in het coderen te vinden als je scheel kijkt na urenlang coderen.

Antwoord 5

*Voor zover ik weet is er niet wat ik normaal doe in dit soort omstandigheden, is een blok eronder maken met een groter formaat ((bordersize*2)+origineel formaat) en dit transparant maken met

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

hier is een voorbeeld

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Bijwerken:

Dit antwoord is achterhaald, aangezien deze vraag al meer dan 8 jaar oud is. Tegenwoordig ondersteunen alle up-to-date browsers rgba, box shadows enzovoort. Maar dit is een goed voorbeeld van hoe het 8+ jaar geleden was.

Antwoord 6

Als alternatieve oplossing die mogelijkin sommigegevallen werkt: verander de border-stylein dotted.

Het hebben van afwisselende groepen pixels tussen de voorgrondkleur en de achtergrondkleur is niet hetzelfde als een ononderbroken lijn van gedeeltelijk transparante pixels. Aan de andere kant vereist dit aanzienlijk minder CSS en is het veel compatibeler in elke browser zonder browserspecifieke richtlijnen.

Antwoord 7

Andere antwoorden gaan over het technische aspect van het probleem van de ondoorzichtigheid van de randen, terwijl ik een hack wil presenteren (alleen pure CSS en HTML). Maak in feite een container-div, met een border-div en dan de content-div.

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

En dan de CSS:(zet de inhoudsrand op geen, zorg voor een zodanige positionering dat er rekening wordt gehouden met de randdikte)

.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;
}

Antwoord 8

Nee, er is geen manier om alleende dekking van een rand in te stellen met css.

Als u bijvoorbeeld de kleur niet wist, is er geen manier om alleen de dekking van de rand te wijzigen door simpelweg rgba()te gebruiken.

Antwoord 9

probeer dit:

<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>

en hier komt onze magische 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;
}

Bekijk hier de Demo.