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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Compréhension approfondie des frontières CSS