Maison interface Web tutoriel CSS Conseils de mise en page CSS : meilleures pratiques pour obtenir des effets de carte arrondis

Conseils de mise en page CSS : meilleures pratiques pour obtenir des effets de carte arrondis

Oct 20, 2023 am 11:10 AM
圆角 mise en page CSS effet de carte

Conseils de mise en page CSS : meilleures pratiques pour obtenir des effets de carte arrondis

Conseils de mise en page CSS : meilleures pratiques pour implémenter des effets de cartes arrondies

Introduction :
Avec le développement continu de la conception Web, les effets de cartes arrondies sont devenus l'un des éléments courants de la conception Web moderne. En utilisant des techniques de mise en page CSS, nous pouvons facilement ajouter de belles cartes aux coins arrondis aux pages Web. Cet article présentera les meilleures pratiques pour obtenir des effets de carte arrondis et fournira des exemples de code spécifiques à titre de référence.

1. Utilisez la propriété border-radius de CSS pour créer un effet de coin arrondi
En CSS, nous pouvons utiliser la propriété border-radius pour créer des éléments avec des coins arrondis. Cette propriété accepte une valeur qui spécifie la taille du congé. Par exemple, border-radius: 10px; créera un élément avec des coins arrondis de 10 pixels.

Afin d'obtenir l'effet d'une carte arrondie, nous pouvons définir un élément au niveau du bloc avec une couleur d'arrière-plan et lui attribuer la valeur d'attribut border-radius appropriée. Voici un exemple de code :

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  margin: 20px;
}
Copier après la connexion

Dans le code ci-dessus, nous créons une classe appelée "card" et l'appliquons à un élément de niveau bloc. Nous avons défini la couleur d'arrière-plan sur blanc, attribué des coins arrondis de 10 pixels et ajouté un effet d'ombre portée pour ajouter de la dimension. En définissant une largeur et des marges appropriées, nous pouvons contrôler la taille et l'espacement de la carte.

2. Ajoutez des bordures et des effets d'ombre à la carte
Afin de rendre la carte plus visible et accrocheuse, nous pouvons y ajouter des bordures et des effets d'ombre. Voici un exemple de code :

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;
}
Copier après la connexion

Dans le code ci-dessus, nous créons une fine bordure pour l'élément card en ajoutant l'attribut border. Nous utilisons la fonction rgba() pour définir la valeur de couleur de la propriété box-shadow afin que la carte ait un effet d'ombre floue.

3. Obtenez plus d'effets en utilisant les dégradés CSS
En plus des coins arrondis et des effets de bordure de base, nous pouvons également obtenir des effets plus riches et plus diversifiés en utilisant des dégradés CSS. Voici un exemple de code :

.card {
  background: linear-gradient(to bottom, #fff, #f2f2f2);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  margin: 20px;
  border: 1px solid #ccc;
}
Copier après la connexion

Dans le code ci-dessus, nous créons un arrière-plan dégradé linéaire à l'aide de la fonction Linear-gradient(). En spécifiant la couleur de début et la couleur de fin, nous pouvons créer un effet dégradé de haut en bas.

4. Ajoutez des effets décoratifs supplémentaires en utilisant des pseudo-éléments CSS
Afin d'améliorer encore la beauté de la carte, nous pouvons ajouter des effets décoratifs supplémentaires en utilisant des pseudo-éléments CSS. Voici un exemple de code :

.card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
  margin: 20px;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background-color: #f6f6f6;
  border-radius: 50%;
}

.card::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: #f6f6f6;
  border-radius: 50%;
}
Copier après la connexion

Dans le code ci-dessus, nous avons créé deux éléments décoratifs circulaires dans les coins supérieur et inférieur de la carte en utilisant les pseudo-éléments ::before et ::after. Nous avons ajouté une touche visuelle supplémentaire aux cartes en définissant leur position, leur taille, leur couleur d'arrière-plan et leurs valeurs de coins arrondis.

Conclusion :
En appliquant les techniques de mise en page CSS ci-dessus, nous pouvons facilement réaliser une conception Web avec un effet de carte aux coins arrondis. Nous pouvons créer une variété d'effets en ajustant la valeur de la propriété border-radius, en ajoutant une couleur d'arrière-plan, des effets de bordure et d'ombre, en utilisant des arrière-plans dégradés et en ajoutant des éléments décoratifs supplémentaires. Ces techniques peuvent nous aider à concevoir une interface Web plus moderne et attrayante.

Lien de référence :
https://www.w3schools.com/css/css3_borders.asp

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Guide pour modifier les coins de la fenêtre Win11 en coins arrondis Guide pour modifier les coins de la fenêtre Win11 en coins arrondis Dec 31, 2023 pm 08:35 PM

Guide pour modifier les coins de la fenêtre Win11 en coins arrondis

Questions fréquemment posées par les enquêteurs front-end Questions fréquemment posées par les enquêteurs front-end Mar 19, 2024 pm 02:24 PM

Questions fréquemment posées par les enquêteurs front-end

Comment ajuster les coins arrondis du champ de recherche Win10 Comment ajuster les coins arrondis du champ de recherche Win10 Jan 15, 2024 pm 03:12 PM

Comment ajuster les coins arrondis du champ de recherche Win10

Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur Oct 20, 2023 pm 06:01 PM

Méthodes et techniques sur la façon d'implémenter la disposition du flux en cascade via du CSS pur

L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine Jan 05, 2024 pm 05:41 PM

L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine

Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal Oct 19, 2023 am 10:19 AM

Tutoriel de mise en page CSS : la meilleure façon d'implémenter la mise en page du Saint Graal

Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire Oct 20, 2023 am 10:46 AM

Conseils de mise en page CSS : meilleures pratiques pour la mise en œuvre de la disposition des icônes de grille circulaire

Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive Sep 26, 2023 pm 01:37 PM

Méthode de mise en page CSS Positions pour implémenter une mise en page d'image réactive

See all articles