borde de fondo css Ⅱ
Esquinas redondeadas del borde
El contorno no cambiará con las esquinas redondeadas. La
sombra del cuadro cambiará con las esquinas redondeadas.
.borderInnerCircle{
width: 60%;
height: 60%;
background-color: blue;
background-image: url('./36.png');
background-repeat: no-repeat;
background-position: right 20px bottom 10px;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
/* outline: .6em solid #655; 不会随着圆角的变化而变化*/
}
Fondo rayado
Horizontal sin rayas graduales
La función linear-gradient () se utiliza para crear una "imagen" de degradado lineal.
Para crear un degradado lineal, debe establecer un punto de inicio y una dirección (especificada como un ángulo) del efecto de degradado. También necesitas definir el color final. El color final es la transición que desea que Gecko suavice y debe especificar al menos 2. Por supuesto, puede especificar más colores para crear efectos de degradado más complejos. (css3)
.tiaowen{
width: 60%;
height: 60%;
background: linear-gradient(#788 50%,red 50%);
/* background-size: 100% 20px; */
}
Rayas verticales
La dirección especificada es hacia la derecha o 90 grados
/* 垂直条纹 */
.verticalStripes{
width: 60%;
height: 60%;
background: linear-gradient(to right,#788 15px,red 15px);
background-size: 30px 100%;
}
Rayas diagonales
El ángulo especificado es de 45 grados u otros ángulos
.diagonalStripes{
width: 60%;
height: 60%;
background: linear-gradient(45deg,#788 25%,red 0,red 50%,#788 0,#788 75%,red 0);
background-size: 30px 30px;
}
Mejores rayas diagonales
.betterDiagonalStripes{
width: 60%;
height: 60%;
background: linear-gradient(45deg,#788 ,red 30px,#788 30px,red 60px,#788 60px,#788 120px,red 120px,#788 150px);
background-size: 30px 30px;
}
Rayas tonales flexibles
La función de gradiente lineal repetido () se utiliza para crear una "imagen" de gradiente lineal repetido
.flexibleStripes {
width: 60%;
height: 60%;
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
}
Descarga de código
agradecer
Si cree que es útil para su estudio, por favor compártalo con quienes lo necesiten o quiera animarlo, gracias por su apoyo y
continuaré actualizándolo. . .