Cómo configurar el borde div en css css establecer el color del borde div
CSS configura el div para mostrar solo un lado del borde. CSS se usa comúnmente en diseño web para diseñar varios estilos y colores de bordes. A veces, una P solo necesita mostrar un borde, por lo que puedes utilizar algunos de los métodos siguientes.
1. Atributo de ancho de borde CSS
El ancho del borde es un atributo importante para mostrar bordes. El uso es el siguiente:
Ancho del borde: derecho, superior, inferior, izquierdo
Descripción del parámetro:
Superior: atributo del borde superior, puede establecer píxeles o estilo , es decir, el ancho del borde superior.
Derecha: atributo del borde derecho, puede establecer píxeles o estilo, es decir, el ancho del borde superior.
Inferior: atributo de borde inferior, puede establecer píxeles o estilo, es decir, el ancho del borde superior.
Izquierda: Propiedades del borde izquierdo. Puede configurar píxeles o estilo, lo que significa el ancho del borde superior.
Los píxeles son como 10px20px, etc.
Los estilos integrados son:
Delgado: define un borde delgado
Medio: el valor predeterminado, define un borde mediano
;Grueso: define un borde grueso;
Heredar: hereda el ancho del borde del elemento principal.
En segundo lugar, atributos de estilo de borde CSS
Border-style se utiliza para establecer el estilo de la línea del borde. La sintaxis es la siguiente:
Border-style: estilo. ;
Los estilos que se pueden configurar son:
Sin definir y sin bordes.
Ocultar es lo mismo que "Ninguno". Excepto cuando se aplica a tablas, donde se usa oculto para resolver conflictos de límites.
La línea discontinua define el borde discontinuo. Aparece como una línea continua en la mayoría de los navegadores.
La línea discontinua define la línea discontinua. Aparece como una línea continua en la mayoría de los navegadores.
Sólido define una línea continua.
Definir líneas dobles dobles. El ancho de línea doble es igual al valor del ancho del borde.
Groove define un borde de ranura tridimensional. El efecto depende del valor del color del borde.
Las crestas definen límites de crestas tridimensionales. El efecto depende del valor del color del borde.
Incrustar define un borde incrustado tridimensional. El efecto depende del valor del color del borde.
Comienza a definir el límite inicial 3D. El efecto depende del valor del color del borde.
Heredar especifica que el estilo del borde debe heredarse del elemento principal.
Tres. Aplicación de muestra
Siempre que el borde definido no sea 0, se puede mostrar el borde (pero es necesario definir el estilo de la línea del borde). Si desea mostrar solo el borde inferior, es equivalente a configurar la parte superior, derecha e izquierda en 0px, siempre que el borde inferior no sea 0.
El ejemplo es el siguiente:
Solo muestra el borde inferior
La visualización es la siguiente:
Si solo quieres muestra el borde derecho, simplemente cambia el borde: el atributo de ancho se cambia a 01px00.
¿Cómo establecer la posición del borde en html?
1. Utilice el atributo flotante de CSS para ajustar la posición en HTML. Uso detallado: primero cree dos contenedores p en el archivo html para facilitar los efectos de demostración. Agregue etiquetas h2 a los contenedores y establezca texto diferente para facilitar la distinción:
2. Configure la clase para la etiqueta p en el estilo. etiqueta Para el estilo del atributo, asígnele altura, ancho y color. Una de las etiquetas h2 usa el atributo flotante y la otra no.
La función de la etiqueta flotante aquí puede ser mostrar el texto a la izquierda o a la derecha, o puede configurarse para que esté vacío. Finalmente, Crtl+S guarda el archivo:
3. Se puede ver que las posiciones del texto en las dos p no son las mismas. De manera similar, el texto con la etiqueta flotante se establece en la posición correcta
¿Cómo configurar el color, el ancho y el alto del borde p con CSS?
El color del borde se puede configurar con el atributo "border-color", el ancho del borde se puede configurar con el atributo "width" y la altura del borde se puede configurar con el atributo "height".
1. Cree un nuevo documento HTML, agregue la etiqueta p en la etiqueta del cuerpo y agregue una clase para esta etiqueta. El nombre de la clase aquí es "demo" como ejemplo:
3. Agregue "ancho" y "alto" al atributo de clase "demostración". El valor del atributo es el tamaño del ancho y el alto. En este momento, el ancho y el alto de p están establecidos:
El color del borde se puede configurar con el atributo "border-color", el ancho del borde se puede configurar con el atributo "width" y la altura del borde se puede configurar con el atributo "height".
1. Cree un nuevo documento HTML, agregue la etiqueta p en la etiqueta del cuerpo y agregue una clase para esta etiqueta. El nombre de la clase aquí es "demo" como ejemplo:
3. Agregue "ancho" y "alto" al atributo de clase "demostración". El valor del atributo es el tamaño del ancho y el alto. En este momento, el ancho y el alto de p están establecidos:
Debido a que p es una etiqueta de página web; en el código de la página web, representa un contenedor. El predecesor de p es la etiqueta de tabla, que también es un contenedor. Se llama "tabla" y se utiliza para el diseño de páginas web.
Ya sea un contenedor o una caja, debe ser un material. El material tiene una forma y un espesor de pared (es decir, tiene un marco en el exterior y un espacio en el interior). CSS puede controlar el grosor de sus paredes y el tamaño del espacio; el control de las tablas por parte de CSS es tan conveniente como el control de p;
Entonces, para que una página web sea hermosa, es necesario poder configurar y controlar esta página. Es muy fácil hacerlo con hojas de estilo CSS en cascada, y el estilo está unificado. y es utilizado por los creadores de páginas web actuales. Entonces, ¿por qué se agrega p al borde CSS?
¿Cómo agregar código de borde a imágenes en HTML?
1. Como se muestra en la figura, en la herramienta de código, primero cree varias imágenes, como se muestra aquí. La imagen img aquí está contenida en el cuadro p y luego establece el ancho del cuadro. eso; la imagen ocupa todo el tamaño del cuadro.
2. El efecto es así, como se muestra en la imagen.
3. Hay dos formas de agregar un efecto de trazo a una imagen. Agregar un trazo a la imagen o agregar un trazo al cuadro exterior. Veamos primero cómo agregar un trazo a la imagen, como se muestra. en la imagen; es decir, agregue directamente un borde de trazo a la etiqueta de imagen img.
4. Como se muestra en la figura, el efecto de imagen después de agregar trazos.
5. Si quieres cambiar el tamaño del trazo y el color de la imagen, modifícalo aquí.
6. Luego, si agrega un efecto de trazo al cuadro p, es lo mismo que agregar el atributo de borde a la img.
7. Ambos métodos pueden tener éxito, depende del método que estés acostumbrado a utilizar.
Información ampliada:
HyperText Markup Language (HyperTextMarkupLanguage), abreviado como HTML, una aplicación bajo el Standard Universal Markup Language.
HTML no es un lenguaje de programación, sino un lenguaje de marcado, que es una herramienta esencial para la producción de páginas web. "Hipertexto" significa que la página puede contener imágenes, enlaces e incluso elementos que no son texto, como música y programas.
La estructura del lenguaje de marcado de hipertexto (o lenguaje de etiquetas de hipertexto) incluye una parte "encabezado" y una parte "cuerpo". La parte "encabezado" proporciona información sobre la página web y la parte "cuerpo". proporciona información específica sobre el contenido de la página web.