Compréhension approfondie des frontières CSS-tutoriel HTML-php.cn

Compréhension approfondie des frontières CSS

迷茫

Libérer： 2017-03-25 10:28:47

original

1348 Les gens l'ont consulté

Attributs de bordure

1.border-width : ne prend pas en charge le pourcentage, prend en charge les mots-clés, fin (1px), moyen (valeur par défaut, 3px, la raison pour laquelle la valeur par défaut est 3px est uniquement lorsque la bordure est de 3 px et plus, le style de bordure n'est valide que

Fruit), épais (5 px)

2. style de bordure : a des valeurs différentes, l'analyse suivante est l'application de valeurs différentes

a.solid : peut réaliser des triangles et des trapèzes

<!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>
<div class="triangle"></div>我是三角形
<div class="trapezia"></div>我是梯形
</body>
</html>

Copier après la connexion

b.dashed : ligne pointillée, dans le navigateur Chrome/Firefox, le rapport entre la ligne pointillée et la ligne continue est de 3 :1 (fin), dans Dans le navigateur IE, le rapport est de 2:1 (dense)

c.dotted : ligne pointillée, dans le navigateur Chrome/Firefox, c'est un point carré, dans le navigateur IE, c'est point rond (vous pouvez utiliser des points pour obtenir un effet de coins arrondis)

d.double : double ligne, règle de calcul, la largeur des lignes doubles est toujours égale, l'intervalle médian +-1, par exemple, 3px=1 (intérieur) + 1 (intervalle central) + 1 (extérieur), vous pouvez réaliser le motif à 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 :

<!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. La bordure peut être utilisée 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 des bordures pour obtenir une disposition à hauteur égale. L'inconvénient est qu'il ne prend pas en charge la largeur en pourcentage

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