Maison > Article > interface Web > Une introduction détaillée à l'attribut border de CSS
Une introduction détaillée à l'attribut border de CSS
- 高洛峰original
- 2017-03-19 14:30:242331parcourir
attribut de border
1. border-width : ne prend pas en charge le pourcentage, prend en charge les mots-clés, mince (1px), moyen (valeur par défaut, 3px, The La raison pour laquelle la valeur par défaut est 3px est que border-style n'est valide que lorsque la bordure est de 3px et de style supérieur : a des valeurs différentes, ce qui suit analyse les applications de différentes valeurs
a.solid : peut réaliser des triangles et des trapèzesb.dashed : ligne pointillée, parcourir dans chrome/Firefox Dans le navigateur, le rapport entre les lignes pointillées et les lignes pleines est de 3:1 (fin), dans le
navigateur IE, le rapport est de 2:1 (dense)
<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html>
c.dotted : La ligne pointillée, dans le navigateur Chrome/Firefox, est un point carré, dans le navigateur IE, c'est un point rond (vous pouvez utiliser des points ronds pour obtenir un effet de coin arrondi) d.double : ligne double, règles de calcul, La largeur des lignes doubles est toujours égale et l'intervalle médian est de -1 Par exemple, 3px=1 (intérieur) 1 (intervalle central) 1 (extérieur), vous pouvez obtenir un graphique à trois barres.
4. Utilisez la bordure pour positionner l'image d'arrière-plan, car l'image d'arrière-plan ne calcule pas la bordure lors du positionnement
5. Utilisez la bordure pour obtenir une hauteur égale. mise en page, l'inconvénient est qu'il ne prend pas en charge la largeur en pourcentage<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/* border:1px solid;*/ }
</style></head><body><p class="a">哈哈</p></body></html>
(4 et 5 sont similaires, les deux utilisent des bordures pour fixer la distance d'un certain côté)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!