Você pode definir uma opacidade da borda no CSS?

409

Existe uma maneira CSS direta de tornar a borda de um elemento semitransparente com algo assim?

border-opacity: 0.7;

Caso contrário, alguém tem uma idéia de como eu poderia fazer isso sem usar imagens?

mcbeav
fonte

Respostas:

626

Infelizmente, o opacityelemento torna o elemento inteiro (incluindo qualquer texto) semi-transparente. A melhor maneira de tornar a borda semi-transparente é com o formato de cor rgba. Por exemplo, isso daria uma borda vermelha com 50% de opacidade:

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 */
}

O problema com essa abordagem é que alguns navegadores não entendem o rgbaformato e não exibirão nenhuma borda se esta for a declaração inteira. A solução é fornecer duas declarações de borda. O primeiro com uma opacidade falsa, e o segundo com o real. Se um navegador for capaz, ele usará o segundo, se não, ele usará o primeiro.

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 */
}

A primeira declaração de borda terá a cor equivalente a uma borda vermelha opaca de 50% sobre um fundo branco (embora qualquer elemento gráfico abaixo da borda não seja exibido).

UPDATE: Adicionei "background-clip: padding-box;" para esta resposta (de acordo com a sugestão do SooDesuNe nos comentários) para garantir que a borda permaneça transparente mesmo se uma cor sólida de fundo for aplicada.

kingjeffrey
fonte
sim, e então voltamos ao problema que ele teve pela primeira vez ^^ "Pensei em usar o rgba para a cor da borda, mas funciona muito mal nos navegadores modernos." enquanto os meus soluções funciona em praticamente todos os navegadores
Breezer
23
Na verdade, o rgba funciona excelentemente em navegadores modernos (a menos que você pense que o IE6-8 é "moderno").
kingjeffrey
4
bem eles estão suposto ser: P e quando você tem 50% + usá-los você deve ver a ele que ele funciona para isto é aswell imo pelo menos para IE7 +
Breezer
42
E é por isso que existe a "opacidade falsa". Minha vida como web designer ficou muito mais fácil quando aceitei que nem todos os navegadores precisam renderizar de forma idêntica. Se eles suportarem border-radius, obterão cantos arredondados. Se não, eles não fazem. O conteúdo ainda está acessível, ainda parece bom, apenas parece melhor se eles estiverem usando um navegador capaz. Eu nunca tive um cliente reclamando disso nos últimos 1,5 anos de operação dessa maneira em todos os projetos.
kingjeffrey
23
Se você está tentando fazer com que o conteúdo atrás do conteúdo com borda brilhe (e NÃO a cor do plano de fundo do próprio elemento com borda), será necessário definir background-clip:padding-box;também.
SooDesuNe
134

É fácil, use uma sombra sólida com deslocamento 0:

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

Além disso, se você definir um raio de borda para o elemento, ele fornecerá bordas bastante arredondadas

jsFiddle Demo

insira a descrição da imagem aqui

Pedro L.
fonte
Isso sempre funcionará. Obrigado pelo trecho :) Para todos, quem quiser apenas ter uma borda para um ou mais sites, é necessário alterar os dois primeiros parâmetros como essa box-shadow: -1px -1px 0px 0px rgba (0,0,0,0,1 ) para alcançar, por exemplo, fronteira
Thomas Richter
Este deve ser usado com cautela! box-shadownão tem tamanho e pode quebrar seu layout, tornando as margens desiguais! jsfiddle.net/bj81hew7/2
William
14

Como outros já mencionaram: CSS-3 diz que você pode usar a rgba(...)sintaxe para especificar uma cor de borda com um valor de opacidade (alfa).

Aqui está um exemplo rápido, se você quiser conferir.

  • Funciona no Safari e no Chrome (provavelmente funciona em todos os navegadores de webkit).

  • Funciona no Firefox

  • Duvido que funcione no IE, mas suspeito que exista algum filtro ou comportamento que o faça funcionar.

Há também esta postagem de stackoverflow , que sugere alguns outros problemas - a saber, que a borda é renderizada sobre qualquer cor de fundo (ou imagem de fundo) que você especificou; limitando assim a utilidade da borda alfa em muitos casos.

Lee
fonte
4
O problema de borda pode ser resolvido com background-clip: padding-box;(e até que isso seja suportado, você pode usar as extensões de fornecedor -webkit e -moz).
kingjeffrey
Adicionei esta resposta à pergunta à qual você está vinculado.
kingjeffrey
6

Se você verificar sua codificação CSS com o validador W3C, verá se o seu código CSS é aceitável, mesmo se funcionou nos principais navegadores.

Criando uma borda transparente via CSS, conforme escrito acima,

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

não é aceito pelos padrões W3C, nem mesmo para CSS3. Eu usei o validador de entrada direta com o seguinte código CSS,

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

Os resultados foram,

Erro de valor: borda Muitos valores ou valores não são reconhecidos: 1px rgba sólido (255,0,0,0.5)

Infelizmente, o valor alfa (a letra "a" no final de "rgb") não é aceito pelo W3C como parte dos valores de cores da borda ainda. Eu me pergunto por que não é padronizado, pois funciona em todos os navegadores. O único problema é se você deseja seguir os padrões do W3C ou se afastar dele para criar algo em CSS.

Para usar o validador CSS online do W3C / entrada direta .

Sempre é uma boa ideia usar um validador para verificar seu trabalho; isso realmente ajuda a encontrar erros pequenos ou até grandes na codificação, quando você fica vesgo após horas de trabalho de codificação.

Mark2090
fonte
11
Errado, isso é perfeitamente aceitável pelos padrões do W3C e é um erro no validador. Veja esta resposta . É uma boa ideia usar o validador, sim, mas não confie nele para tudo.
BoltClock
5

* Não tanto quanto eu sei que não há o que eu faço normalmente nesse tipo de circunstâncias, é criar um bloco abaixo com um tamanho maior ((tamanho de borda * 2) + tamanho original) e torná-lo transparente usando

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

aqui está um exemplo

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

Atualizar:

Esta resposta está desatualizada, pois, afinal de contas, essa pergunta tem mais de 8 anos. Hoje, todos os navegadores atualizados suportam rgba, sombras de caixa e assim por diante. Mas este é um exemplo decente de como era há mais de 8 anos.

Breezer
fonte
Sim, foi o que acabei fazendo, na verdade, é uma droga com o posicionamento dos elementos.
Mcbeav 31/10/10
adicionado um exemplo para que você possa ver mais claro como eu estava pensando :)
Breezer
isso pode ser feito - mas não com amplo suporte a vários navegadores. No entanto, há boas chances de que qualquer navegador que ofereça suporte à opacidade de css na cor de plano de fundo também suporte rgba(...)em cores de borda. você pode experimentá-lo aqui .
Lee
@ Lee, o IE suporta a opacidade do "filtro", mas não qualquer forma de rgba (até o IE9).
kingjeffrey
2

Como uma solução alternativa que pode funcionar em alguns casos: altere border-stylepara dotted.

Ter grupos alternados de pixels entre a cor do primeiro plano e a cor do plano de fundo não é o mesmo que uma linha contínua de pixels parcialmente transparentes. Por outro lado, isso requer significativamente menos CSS e é muito mais compatível em todos os navegadores, sem nenhuma diretiva específica.

Stephan Samuel
fonte
0

Outras respostas tratam do aspecto técnico do problema de opacidade da borda, enquanto eu gostaria de apresentar um hack (apenas CSS e HTML puro). Basicamente, crie uma div de contêiner, com uma div de borda e, em seguida, a div de conteúdo.

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

E então o CSS: (defina a borda do conteúdo como none, cuide do posicionamento para que a espessura da borda seja contabilizada)

.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;
}
RBk
fonte
0

Não, não há como definir apenas a opacidade de uma borda com css.

Por exemplo, se você não conhecia a cor , não há como alterar apenas a opacidade da borda usando simplesmente rgba().

Travis J
fonte
-1

tente isto:

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

E aqui vem o nosso CSS mágico ..

* {
  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;
}

Confira a demonstração aqui.

A Malik
fonte