Une introduction détaillée à l'attribut border de CSS-tutoriel CSS-php.cn

Une introduction détaillée à l'attribut border de CSS

高洛峰

Libérer： 2017-03-19 14:30:24

original

2323 Les gens l'ont consulté

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èzes

b.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>

Copier après la connexion

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.

e.inset (encart), outset (extérieur convexe), ridge (groove) : style obsolète, mauvaise compatibilité, aucun scénario d'utilisation

3.border-color : in Lors de la spécification de la couleur, utilisez la couleur comme couleur de bordure. Vous pouvez utiliser cette fonctionnalité pour simplifier le code de style CSS lorsque le lien change de couleur. Par exemple :

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>

Copier après la connexion

(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!