1. Modificar la barra de desplazamiento vertical predeterminada
/* 自定义滚动条样式 */
/* 滚动条整体样式 */
::-webkit-scrollbar {
width: 10px; /* 滚动条宽度 */
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 滚动条轨道背景色 */
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #888; /* 滚动条滑块颜色 */
border-radius: 5px; /* 滑块圆角 */
}
/* 滚动条滑块悬停样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #555; /* 滚动条滑块悬停时颜色 */
}2. Establecer un color degradado para un fragmento de texto
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-text {
background: linear-gradient(to right, #ff0000, #00ff00); /* 渐变色 */
-webkit-background-clip: text; /* 将背景应用于文字 */
-webkit-text-fill-color: transparent; /* 将文字颜色设为透明 */
}
</style>
</head>
<body>
<h1 class="gradient-text">这是一段渐变色文字</h1>
</body>
</html>En el ejemplo anterior, usamos linear-gradient propiedades CSS para definir el degradado. to rightIndica un degradado de izquierda a derecha. #ff0000y #00ff00son de dos colores, puedes ajustar según tus necesidades.
Para aplicar el degradado al texto, usamos la propiedad para aplicar el fondo al texto y la propiedad para establecer el color del texto en transparente para que se vea el degradado del fondo. -webkit-background-clip-webkit-text-fill-color
Finalmente, agregue la clase a la etiqueta para que el efecto de degradado se aplique al texto. <h1> gradient-text
3. 9 pseudo-elementos CSS menos conocidos que aumentan su poder de estilo
(1) :: pseudo-elemento de selección
El pseudo-elemento ::selection apunta a la porción de texto seleccionada por el usuario. Proporciona una forma de aplicar estilos al texto seleccionado y personalizar su apariencia.
ejemplo
::selection {
background-color: yellow;
color: red;
}En el código anterior, cuando el usuario selecciona texto en la página, se resaltará con un fondo amarillo y un color de texto rojo.
2.::pseudoelemento de primera letra
El pseudoelemento ::first-letter le permite diseñar la primera letra de un elemento a nivel de bloque. Resulta útil cuando desea aplicar un formato especial a los caracteres iniciales de un párrafo o encabezado.
ejemplo:
p::first-letter {
font-size: 2em;
color: red;
}En el fragmento de código anterior, la primera letra de cada párrafo se mostrará en una fuente más grande y en rojo.
3. El pseudoelemento ::primera línea
Al igual que ::first-letter, el pseudoelemento ::first-line apunta a la primera línea de un elemento de nivel de bloque o texto. Puede usar este pseudoelemento para aplicar un estilo específico a la línea de inicio de un párrafo o encabezado.
ejemplo
p::first-line {
font-weight: bold;
text-decoration: underline;
}En el código anterior, la primera línea de cada párrafo estará en negrita y subrayada.
4. ::pseudoelemento marcador
El pseudoelemento ::marker apunta a un marcador para un elemento de lista, como una viñeta en una lista desordenada o un número en una lista ordenada. Con este pseudoelemento, puede personalizar la apariencia del marcado.
ejemplo:
li::marker {
color: blue;
font-weight: bold;
}5. ::pseudoelemento de marcador de posición
El pseudoelemento ::placeholder le permite diseñar el texto del marcador de posición en campos de entrada y áreas de texto. Al aplicar estilos personalizados a los marcadores de posición, puede mejorar la experiencia del usuario y hacer que sea coherente con su diseño general.
ejemplo:
input::placeholder {
color: #999;
font-style: italic;
}En el código anterior, el texto del marcador de posición en el campo de entrada se mostrará en estilo de fuente gris claro y cursiva.
6. ::cue pseudo-elemento
El pseudoelemento ::cue tiene como objetivo el texto de entrada de un elemento <audio> o <video>. El texto de aviso se usa a menudo para subtítulos o subtítulos en contenido multimedia. Con este pseudoelemento, puede aplicar estilos específicamente al texto de la sugerencia.
ejemplo:
video::cue {
color: white;
background-color: black;
}En el código anterior, el texto de sugerencia en el elemento de video tendrá un color de texto blanco y un fondo negro.
7. Los pseudo-elementos ::grammar-error y ::spelling-error
Los pseudoelementos ::grammar-error y ::spelling-error le permiten diseñar partes de texto marcadas como errores gramaticales u ortográficos, respectivamente. Estos pseudoelementos se pueden usar para proporcionar señales visuales a los usuarios cuando hay errores en el contenido.
ejemplo:
p::grammar-error {
text-decoration: line-through;
color: red;
}
p::spelling-error {
text-decoration: underline;
color: blue;
}En el código anterior, los errores gramaticales en el párrafo se mostrarán con una decoración de texto subrayada y en rojo, mientras que los errores ortográficos se mostrarán con un subrayado y en azul.
8. El pseudo-elemento ::backdrop
El pseudoelemento ::backdrop se usa junto con la API de pantalla completa para personalizar el fondo detrás de un elemento en modo de pantalla completa. Le permite cambiar el fondo negro predeterminado a un color o estilo personalizado.
ejemplo:
video::backdrop {
background-color: gray;
}En el código anterior, cuando un elemento de video está en modo de pantalla completa, el fondo detrás de él tendrá un color de fondo gris.
9. El pseudo-elemento ::target-text
El pseudoelemento CSS ::target-text representa el texto al que desplazarse (si el navegador admite fragmentos de texto). Permite al autor elegir cómo resaltar esa parte del texto.
ejemplo:
::target-text {
background-color: rebeccapurple;
color: white;
}