No artigo anterior, usamos uma imagem com gradiente para cima e para baixo como fundo do título e aplicamos a ela um efeito de canto arredondado. É verdade que esse tipo de moldura com cantos arredondados só pode ser usada para fotos relativamente monótonas? Podemos também tornar algumas fotos com cores ricas transparentes e arredondadas?
A resposta é sim, vamos dar uma olhada em seu kung fu definitivo.
Vamos dar uma olhada nas renderizações finais primeiro :
Veja, esta é uma imagem arredondada obtida com CSS puro. Para ver o efeito de transparência, apliquei especialmente uma imagem de fundo. Você pode baixar este modelo para o seu computador e redimensionar a janela como desejar. transparente.
Com este efeito, você não precisa mais se preocupar em arredondar os cantos de cada imagem. Esse efeito é frequentemente visto em algumas páginas de demonstração baseadas em imagens e é especialmente adequado para listas com muitas imagens. Que tal, o efeito não é ruim!
Ok, vamos dar uma olhada em seu mecanismo de implementação!
Princípio de implementação:
Este efeito é na verdade a variante que implementei no Capítulo 2. Vamos falar sobre os principais códigos-chave.
A principal mudança é o posicionamento da imagem de fundo, mas desta vez é um pouco diferente daquela do Capítulo 2. Desta vez é preciso levar em consideração as mudanças nos dois cantos arredondados abaixo.
Vejamos primeiro a implementação dos dois cantos arredondados acima:
/*Posicionamento do deslocamento da imagem--a parte superior*/
.sharp b.b2{posição de fundo: -4px topo;}
.sharp b.b3{posição de fundo:-2px -1px;}
.sharp b.b4{posição de fundo:-1px -2px;}
Observe as configurações de estilo dos dois cantos arredondados abaixo. A parte inferior e a parte superior correspondem uma à outra.
/*Posicionamento do deslocamento da imagem--parte inferior*/
.sharp b.b7{posição de fundo: -4px inferior;}
.sharp b.b6{posição de fundo: -2px inferior;}
.sharp b.b5{posição de fundo: -1px inferior;}
Diferentes estilos de chamada de imagem:
/*Esquema de cores um, estilo verde----------------------------------------*/
/*Cor da borda*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{cor da borda:#262626;}
.color1 .b1,.color1 .b8{fundo:#262626;}
/*Caminho da imagem*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:url(image/1.jpg) não -repita;}
As duas primeiras frases juntas formam o valor da cor da caixa de borda, que precisa ser definida com o mesmo valor de cor. A frase a seguir define o caminho de chamada da imagem.
Apenas três frases para obter um esquema de cores.