Aggiunta di una mossa di confine in CSS

Utilizzando i CSS, come posso aggiungere un bordo di 100px per tutte le parti di un’immagine che è il perimetro pixel teso e confuso? ad esempio, il bordo a sinistra dell’immagine è un insieme di colonne 1-3 allungata orizzontalmente e mescolate?

Vedo altri post che spiega come mantenere i bordi taglienti ma sfocatura centro.

InformationsquelleAutor OneSolitaryNoob | 2014-11-10

 

Tags: ,

2 Replies
  1. 19

    Se si desidera sfocare un’immagine ai bordi e se si dispone di un unico background-color allora si potrebbe utilizzare il box-shadow con inset per archiviare il comportamento desiderato:

    box-shadow: inset 0px 0px 40px 40px #DBA632;

    dove #DBA632 è il tuo colore di sfondo.

    Vedere questo frammento di codice:

    CSS:

    body {
  background: #DBA632;
}
div {
  background: url('http://lorempixel.com/500/300/nature');
  width: 500px;
  height: 300px;
  margin: 50px;
  box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}

    HTML:

    <div></div>

    Vecchia risposta:

    Stai cercando qualcosa di simile a questo?

    box-shadow: 0px 0px 40px 40px #000000;

    I primi due set di valori di offset dell’ombra, il terzo valore è la quantità di sfocatura e l’ultimo valore è la diffusione dell’ombra.

    Si può giocare con quei valori per vedere come cambiano gli effetti: DEMO

    • Sto cercando una sfocatura di un’immagine, sembra scatola di ombra è di un unico colore?
    • si dovrebbe scrivere chiaro nella tua domanda non solo nei commenti!
    • mi dispiace wavemaster, è proprio quello che intendevo, prendendo il perimetro pixel e stretching fuori
    • Questo dovrebbe ottenere la risposta corretta. Si prega di controllare.
    InformationsquelleAutor Wavemaster
  2. 6

    box-shadow è ciò che si desidera. Ho messo alcuni link qui sotto che vi insegnerà tutto ciò che hai bisogno di sapere su di esso:

    http://www.css3.info/preview/box-shadow/

    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    • c’è un modo per fare ombra, basata su un’immagine? non un singolo colore
    • Mi dispiace, non ho mai visto la tua domanda qui. Credo che sia stato un po’, ma ho pensato che sarebbe ancora dare una risposta: L’unico modo che posso pensare di farlo sarebbe quello di usare CSS3 filtri (vedi questo link: inserthtml.com/2012/06/css-filters). Vorrei provare ad usare il filtro di sfocatura e la posizione è dietro l’oggetto che si desidera essere un ombra di (dandogli un basso z-index), che hanno compensato un po’. Combinare che con la luminosità filtri per scurirla. È tutto quello che posso pensare, ma non l’ho mai provato io stesso. Buona fortuna.
    • grazie! ho fatto questo lato server, nel frattempo,
    InformationsquelleAutor Michael

Lascia un commento