O documento discute propriedades CSS para sombra, borda e cantos arredondados de elementos, fornecendo exemplos de código e valores possíveis para cada propriedade. É explicado como usar box-shadow para adicionar sombras, border-image para usar imagens como bordas e border-radius para arredondar os cantos de elementos.

2. Roteiro
 Mandar Link do site do projeto;
 box-shadow;
 Como usar o “box-shadow”.
 Border Image;
 Como usar o “Border Image”;
 Rounded Corners;
 Como usar o “Rounded Corners”;

3. Propriedade Box Shadow
 O box-shadow propriedade descreve um
ou mais efeitos de sombra como uma lista
separada por vírgulas. Ele permite que
você lançar uma sombra projetada a partir
dos elementos.

4. Exemplo
 div {
box-shadow: 10px 10px;
}
Eixo X da sombra! Eixo Y da sombra!

5. div {
width: 300px;
height: 100px;
padding: 15px;
background-color: Goldenrod;
box-shadow: 10px 10px;
}

6. div {
box-shadow: 10px 10px 10px 10px grey;
}
Eixo X da sombra!
Eixo Y da sombra!
Borrão da Sombra!
Espalhar a sombra!
Cor da sombra!

7. div {
width: 300px;
height: 100px;
padding: 15px;
background-color: Goldenrod;
box-shadow: 10px 10px 10px grey;
}
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: Goldenrod;
box-shadow: 10px 10px 10px 10px
grey;
}

8. div {
width: 400px;
height: 240px;
padding: 10px;
background-image: url(“paisagem.jpg”);
background-size: 420px 300px;
box-shadow: 10px 10px 5px 2px grey;
}

9. INSET
div {
...
box-shadow: 10px 10px 5px 2px yellow
inset;
}

10. INITIAL
div {
...
box-shadow: initial;
}

11. INHERIT
div {
...
box-shadow: inherit;
}

12. Diferença
INITIAL X INHERIT

13. Border Image
 Permite especificar uma imagem para ser usada
em vez da borda normal em torno de um
elemento.
 A propriedade tem três partes:
A imagem para usar como a fronteira;
Onde cortar a imagem ;
Defina se as seções do meio deve ser
repetido(round) ou esticado(stretch);

14. Border Image
#b_imgg{
width: 300px;
height: 140px;
border: 10px solid transparent;
padding: 15px;
background-color: white;
border-image: url("border.png") 30 round;
}

15. Border Image
#b_imgg{
width: 300px;
height: 140px;
border: 10px solid transparent;
padding: 15px;
background-color: white;
border-image: url("border.png") 30 stretch;
}

16. Outras Propriedades
Border Image
border-image-source Especifica o caminho para a imagem a ser
usado como uma borda
border-image-slice Especifica como cortar a imagem Beira
border-image-width Especifica as larguras da imagem fronteira
border-image-outset Especifica a quantidade pela qual a área da
imagem fronteira se estende para além da
caixa de fronteira
border-image-repeat Especifica se a imagem de fronteira deve ser
repetido, arredondado ou esticado

17. border-image-source
#b_imgg{
...
border-image-source: url("border.png");
}
Valores: None Initial inherit url(“”)

18. border-image-slice
Valores: % Número Initial inherit fill
#b_imgg{
...
border-image-slice: 30% fill;
}

19. border-image-width
#b_imgg{
...
border-image-width: 50px;
border-image-slice: 30;
}
Valores: % Número Initial inherit Length/auto

20. border-image-outset
#b_imgg{
...
border-image-width: 10px;
border-image-outset: 10px;
}
Valores: Número Initial inherit Lengt

21. border-image-repeat
#b_imgg{
...
border-image-repeat: repeat;
border-image-slice: 20;
}
Valores: stretch Repeat Initial Inherit space round

22. Rounded corners (border-
radius)
Propriedades Especificação
border-radius Um atalho para definir todas as
quatro fronteiras- EX: (20px) ou
(10px 15px 12px 50px)
border-top-left-radius Define a forma da borda do canto
superior esquerdo
border-top-right-radius Define a forma da borda do canto
superior direito
border-bottom-right-radius Define a forma da borda do canto
inferior direito
border-bottom-left-radius Define a forma da borda do canto
inferior esquerdo

23. Border-radius
border-radius:100%;
border-radius:0px;
border-radius:30px
150px;

24. border-radius: 15px 50px 30px 5px;
border-radius: 15px/50px;
border-radius: 35px/90px;

25. border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;

26. Prática
 Box-shadow;
 Border-image;
 Border-radius;

27. Referências
 W3SCHOOLS. CSS3 box-shadow. Disponível em:
<http://www.w3schools.com/cssref/css3_pr_box-shadow.asp>. Acesso
em: 27 fev. 2016.
 box-shadow. Disponível em: < https://developer.mozilla.org/en-
US/docs/Web/CSS/box-shadow >. Acesso em: 27 fev. 2016.
 W3SCHOOLS. CSS3 Border Images. Disponível em:
<http://www.w3schools.com/css/css3_border_images.asp>. Acesso em:
27 fev. 2016.
 W3SCHOOLS. CSS3 Rounded Corners. Disponível em:
<http://www.w3schools.com/css/css3_borders.asp>. Acesso em: 27 fev.