Como definir um contorno para uma marca div HTML
estou a tentar definir uma fronteira em torno de uma marca div em HTML. Em alguns navegadores a fronteira não aparece.
Aqui está o meu código HTML:
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div> Como faço para definir um contorno para uma etiqueta HTML div?
8 answers
Tenta ser explícito sobre todas as propriedades da fronteira. Por exemplo:
border:1px solid black;
Ver Propriedade estenográfica fronteiriça . Embora os outros bits sejam opcionais alguns navegadores não configuram a largura ou a cor como padrão que você esperaria. No seu caso, aposto que é a largura que é zero, a menos que especificado.
Pode usar
border-width:2px;
border-style:solid;
border-color:black;
Ou em estenografia
border: 2px solid black
De acordo com o W3C:
Por outras palavras, é necessário definir um estilo de fronteira (por exemplo,Uma vez que o valor inicial dos estilos de contorno é 'nenhum', nenhum contorno será visível a menos que o estilo de contorno esteja definido.
solid) para que a fronteira apareça. {[2] } só define a largura. Além disso, a cor será por padrão a mesma que a cor do texto (que normalmente não parece boa).
Eu recomendo definir os três estilos:
style="border: thin solid black"
<div id="divActivites" name="divActivites" style="border:thin">
<textarea id="inActivities" name="inActivities" style="border:solid">
</textarea>
</div>
border-width:thin
Aqui está o link (Carregue aqui) verifique os diferentes tipos de estilos de fronteira
Você também pode definir a largura do contorno escrevendo a largura em termos de pixels.. (como a largura da borda:1px), a largura mínima é 1px.
Pode usar:
border-style: solid;
border-width: thin;
border-color: #FFFFFF;
Tem de definir mais campos e depois apenas a largura do contorno. O estilo basicamente coloca a borda na página. A largura controla a espessura, e a cor diz-lhe qual a cor para fazer o contorno.
border-style: solid; border-width:thin; border-color: #FFFFFF;
.centerImge {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
height:50%;
}
<div>
@foreach (var item in Model)
{
<span> <img src="@item.Thumbnail" class="centerImge" /></span>
<h3 style="text-align:center"> @item.CategoryName</h3>
}
</div>
No bootstrap 4, pode usar utilitários de fronteira assim.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.border-5 {
border-width: 5px !important;
}
</style>
<textarea class="border border-dark border-5">some content</textarea>