Usando a propriedade border-radius CSS3, você pode fazer "cantos arredondados" para qualquer elemento. Com a propriedade border-radius, você pode usar as seguintes regras:
(1) Quatro valores: o primeiro valor é o canto superior esquerdo, o segundo valor é o canto superior direito, o terceiro valor é o canto inferior direito e o quarto valor é o canto inferior esquerdo (2) Três valores: o primeiro o valor é o canto superior esquerdo, o segundo valor é o canto superior direito e o canto inferior esquerdo, o terceiro valor é o canto inferior direito (3) Dois valores: o primeiro valor é o canto superior esquerdo e o canto inferior direito, o o segundo valor é o canto superior direito e o canto inferior esquerdo (4) Um valor: os quatro valores do filete são iguais
Se quiser que os gráficos tenham um efeito de canto arredondado, você só precisa adicionar um atributo, o atributo border-radius. Se quiser que fique bem redondo, aumente esse valor.
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Página inicial</title>
<estilo>
div{
largura: 100px;
altura: 100px;
cor de fundo: rgb(151, 26, 49);
raio da borda: 10px;
}
imagem{
largura: 100px;
altura: 100px;
raio da borda: 10px;
}
</estilo>
</head>
<corpo>
<div>
<img src="../vue/1.jpg">
</div>
</body>
</html>Se quiser que seja redondo, basta escrever 100%.
efeito de sombra box-shadow
margin: 0 auto: Não há necessidade de controlar a parte superior e inferior. Auto permite que os espaços esquerdo e direito sejam distribuídos uniformemente e, em seguida, coloca a caixa no meio. Permitir que as lacunas entre os espaços esquerdo e direito sejam distribuídas uniformemente é o que auto faz.
0 significa nenhuma sombra na direção horizontal, o segundo 0 significa nenhuma sombra na direção vertical e o terceiro é o desfoque da sombra.
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<title>Página inicial</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="texto/css">
div{
largura: 500px;
altura: 500px;
cor de fundo: verde amarelo;
margem: 0 automático;
sombra da caixa: 0 0 50px rgba (0, 0, 0, 0,5);
}
</estilo>
</head>
<corpo>
<divclass="d1">
</div>
</body>
</html>Isso conclui este artigo sobre os novos recursos do CSS3, efeito de sombra de caixa e raio de borda arredondado. Para obter mais informações sobre o novo recurso de sombra de caixa do CSS3, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. você apoiará mais o downcodes.com no futuro!