I social media come i telefoni intelligenti, PDA e computer tablet, hanno portato una vasta gamma di nuove possibilità di visualizzazione per la progettazione Web. Angoli arrotondati sono uno di quegli elementi che è possibile applicare a qualsiasi forma con CSS3, e la questione se il confine avvolge dentro o fuori è discutibile. Applicando lo stile di certi elementi, varietà senza pari è disponibile per qualsiasi bordo visibile.

Angoli arrotondati

La proprietà border-radius porta angoli arrotondati a una forma utilizzando le dichiarazioni CSS3 puri. Il valore del raggio di confine si trova in pixel, ed i numeri più alti aumentano il grado della curva. Internet Explorer non riconosce la proprietà border-radius così sarebbe visualizzare una tale scatola con angoli squadrati. Per accogliere altre idiosincrasie del browser, è possibile utilizzare le dichiarazioni specifiche del browser. Ecco un esempio di tutto questo:

.Immagine {

border:5px solid #5F9EAO;

Border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

}

Ombra

CSS3 offre un metodo semplice per la creazione di ombre efficaci per dare profondità a qualsiasi confine curva. La proprietà box-shadow utilizza tre elementi come RGB - offset orizzontale, verticale offset e sfocatura raggio. La quantità di sfocatura di offset ed è indicata in pixel. La quantità sfocatura può rendere l'effetto di Sharp a molto diffusa. La possibilità di aggiungere un quarto elemento, colore, significa che il bordo può avere una cornice di angoli arrotondati con profondità.

: Pseudo classe first-child

L': primo figlio è ciò che è noto come una classe pseudo nei CSS. La classe pseudo vale solo per l'elemento che contiene, che in un esempio può essere chiamato "wrapper". Se la classe pseudo stesso è una forma a cui può essere applicato un bordo, il bordo risultante è all'interno dell'area superficiale del genitore "involucro".

Border-in-a-Box

Un div involucro con un div involucro può produrre un bordo in una zona delimitata, al contrario di un bordo intorno al perimetro del div. E 'creato per lo styling dei div genitore con un div bambino. Il codice è abbastanza semplice per chi ha familiarità con la codifica:

.Wrap {

border-width: 0;

background-color: # FFFFB2;

width: 50%;

padding: 0.5em;

}

#panel .Wrap {

background-color: inherit;

altezza: 6em;

border: 3px tratteggiato # FF7D5C;

text-align: center;

}

E la sua html:

<Div class = "wrap">

<div id="panel">

& Lt; p> Questo pannello dovrebbe apparire come un cucita sul bordo interno. & Lt; / p>

& Lt; / div>

</ Div>