Faouweb • Afficher le sujet - CSS - Arrondir un cadre + ajout d'une ombre sans images.

Faouweb · **Inscription:** Mar 24 Mar 2009 18:52 **Messages:** 19

Bonjour,
Une petite astuce pour arrondir un cadre autour d'un texte, sans mettre une image de fond, et ajouter une ombre à ce cadre. Firefox seulement pour le moment.
Le résultat:

Petite explication:

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
    <title>
        Faous / css
    </title>
    <link rel="stylesheet" type="text/css" href="faouweb.css" />
</head>

<body>

<div id="content">
  
   <h2>Faouweb</h2>
    
        <div id="faouweb">
  <p>Plus de neuf Français sur dix (91 %) pensent que la crise financière   aura un impact sur tout le monde et pas uniquement sur ceux qui ont   investi en Bourse, selon un sondage Infraforces diffusé mardi 25 mai.   Seuls 19 % des sondés estiment qu'elle n'aura aucun impact sur eux.</p>
        </div>

</div>

</body>

</html>

CSS:

Code:

/*<<<<<<< FAOUWEB.NET >>>>>>>*/
body {
    background-color: #eee;
    margin: 5px auto;
    font-family: verdana, sans-serif;
}

div#content {
    width: 75%;
    margin: 0 auto;
    padding: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
}

h1, h2, h3 {
    color: #960;
    margin: 0;
}

p {
    margin: 0 0 0.75em 0;
    line-height: 1.5em;
}

    

#faouweb{
    border: 2px solid #003;
    padding: 5px;    
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 3px 3px 5px #333;
    
    }

Pour les débutants il y a la feuille de style est externe portant le nom de: faouweb.css. Faire attention à ce petit code:

Code: