efeitos de bordas para imagens

Olá gente tudo bem com vocês? Comigo estava, estou tão decepcionada com uma pessoa que nossa perdi totalmente a confiança nos outros e vontade de ajudar os outros, isso é tão deprimente pois estava tão alegre achando que alguém realmente gostava de mim e que me apoiava como amiga e como colega de blog, mas que grande erro. Então depois que muitas blogueiras de sucesso saem da blogosfera e mandam tudo isso aqui a merda vocês ficam reclamando né? Mesmo a gente tentando se afastar de grupinhos idiotas que ficam o dia inteiro gerando tretas a gente sempre aparece no meio e isso é bem engraçado. Nunca fui muito de ficar comentando assuntos polêmicos por ser justamente uma perda de tempo, são menininhas invejosas que ficam destilando veneno e suas frustrações por não conseguirem serem boas na área de html ou em qualquer outra ¬¬

Bem nem vou mais escrever nada sobre isto pois os poucos que gostam de mim e os que também não gostam já devem saber do que estou falando, nem adianta vir me perguntar sobre de quem estou falando pois não irei perder meu tempo. Agora mudando da água para o vinho o post de hoje é sobre efeitos em bordas, tipo eu amo efeitos assim para usar em imagens no blog, e os lugares mais legais para usar são em avatares, imagens que vão nos banners ou em qualquer outro lugar que a pessoa queira um efeito mais simples mas fofo ao mesmo tempo. Sei que muitos não gostam de efeitos espalhafatosos pelo simples fato de seus layouts já chamarem atenção em algumas partes e então preferem efeitos assim. Eu mesma amo efeitos assim e sempre usei alguns que eu mesma criei, então essas bordas eu fiz para quem quer um efeito simples e as vezes não acham na net!!

LIVE PREVIEW [̲̅♥̲̅]

Vá até o modelo e em editar html, dentro procure por: }]]></b:skin> acima dele cole o modelo que preferir:

Efeito 1:

.afiliate {opacity:0.7; padding: 1px;border: 4px double #FFCFCF;outline: solid 1px #FFCFCF;outline-offset: -1px;border-radius:2px;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out; }
.afiliate:hover {padding: 1;border: 4px double #FFC8D4;outline: dotted 1px #FFCFCF;outline-offset: -9px;opacity:0.9;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}

Link:

<a href="LINK"target="blank" title="NOME"><img src="IMAGEM" width="50px"class="afiliate" /></a>

Efeito 2:

.afiliate2 {background:#fff;opacity:0.7;padding: 1px;border: 4px double #FFCFCF;outline: solid 1px #FFCFCF;outline-offset: -1px;border-radius:2px;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}
.afiliate2:hover{background:#fff;padding: 1;border: 4px solid #FFD0D0;opacity:0.9;-webkit-box-shadow: inset 50px 30px 0px 30px #FF8888;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}

Link:

<a href="LINK"target="blank" title="NOME"><img src="IMAGEM" width="50px"class="afiliate2" /></a>

Efeito 3: 

.afiliate3 {background:#fff;opacity:0.7;padding: 1px;border: 4px double #FFCFCF;outline: solid 1px #FFCFCF;outline-offset: -1px;border-radius:2px;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}
.afiliate3:hover{background:#fff;opacity:0.9;padding: 1;border: 4px double #FFC8D4;outline: double 4px #FFB2B2;outline-offset: -6px;-webkit-box-shadow: offset 70px 50px 0px 50px #fff;-webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;}

Link:

<a href="LINK"target="blank" title="NOME"><img src="IMAGEM" width="50px"class="afiliate3" /></a>