Trucos avanzados en css
1. Usa css para hacer triángulos
Puedes hacer triángulos directamente en css:
/*html代码*/
<body>
<div class="box"></div>
hello
</body>
/*css样式*/
.box {
width: 0;
height: 0;
border: 40px solid green;
border-top-color: brown;
}
Efecto de visualización:
cambie el color del borde a un color transparente transparente
2. Estilo de interfaz de usuario
1. Estilo de ratón
cursor: pointer //小手模式
El estilo del mouse tiene las siguientes opciones
| valor de atributo | describir |
|---|---|
| defecto | blanco, predeterminado |
| puntero | mano diminuta |
| moverse | moverse |
| texto | texto |
| No permitido | prohibir |
2. Esquema
Para eliminar el contorno de un cuadro de texto o de entrada , utilice contorno: ninguno;
input {
outline:none; //或者设置属性值为0
}
efecto de visualización:
3. Está prohibido arrastrar y soltar el cuadro de texto para cambiar el tamaño
Al configurar el texto, a veces no queremos arrastrar el cuadro de texto , lo que se puede lograr configurando la propiedad resize: none .
/*html代码：*/
<label for="message">内容</label>
<textarea name="content" id="" cols="30" rows="10"></textarea>
/*css样式效果*/
textarea {
resize: none;
}
efecto de visualización:
3. atributo de alineación vertical:
Puede utilizar la propiedad de alineación vertical para establecer la alineación vertical de los elementos . vertical-align es principalmente para alinear elementos de formulario o imágenes verticalmente con texto .
Algunos valores de propiedad de vertical-align:
| valor de atributo | describir |
|---|---|
| base | De forma predeterminada, el elemento se coloca en la línea de base del elemento principal. |
| cima | Alinee la parte superior del elemento con la parte superior del elemento más alto de la línea |
| medio | Poner el elemento en el medio del elemento padre |
| abajo | Alinee la parte superior del elemento con la parte inferior del elemento más bajo de la fila |
/*html代码编写*/
<img src="../../HTML/images/6.jpg" alt="">like U very much
/*css样式*/
img {
vertical-align: middle;
}
Efecto de visualización:
1. Utilice la alineación vertical para resolver el problema
de los espacios debajo de la imagen. El motivo de los espacios : los elementos de bloque en línea se alinearán con la línea de base del texto de forma predeterminada.
(1 ) Elimine el espacio que queda debajo de la imagen configurando el valor de alineación vertical en medio | arriba | abajo
(2) Convierta el elemento en un elemento a nivel de bloque : mostrar: bloque;
4. La pantalla de puntos suspensivos de texto de desbordamiento:
1. Visualización de puntos suspensivos de desbordamiento de texto de una sola línea
El proceso de implementación específico es el siguiente:
.content {
width: 200px;
height: 100px;
background-color: cadetblue;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2. Visualización de puntos suspensivos de desbordamiento de texto de varias líneas:
.content1 {
width: 200px;
height: 100px;
background-color: chartreuse;
overflow: hidden;
display: -webkit-box; /* 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 5; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
text-overflow: ellipsis;
}
efecto de visualización:
