Est-il possible d'avoir CSS des coins arrondis sur un iframe?

J'ai regardé autour, et aussi loin que je peux voir, c'est pas possible, mais dire que vous êtes l'incorporation d'un YouTube iframe, est-il possible d'arrondir les coins à l'aide de CSS?

OriginalL'auteur sren | 2011-04-21

  1. 6

    La div conteneur méthode décrite dans Comment Obtenir des Coins Arrondis sur un iFrame avec Border-Radius CSS fonctionne pour moi.

    Et pour ce faire, il vous suffit de l'envelopper l'iFrame dans des balises div et de donner la div de ces propriétés css:

    <div style="border-radius: 10px; width: 300px; overflow: hidden;">

    La border-radius doit être réglé à tout ce que vous voulez de la rondeur et la width doit être réglé sur la largeur de l'iFrame, sinon vous obtiendrez seulement un peu (le cas échéant) des coins arrondis. Mais la chose la plus importante est la overflow: hidden, que ce cache le iFrames réel coins.

    Ne fonctionne pas sous chrome
    Dans Chrome, vous pouvez simplement appliquer border-radius: 10px directement à l'iframe.
    la version actuelle (28.0.1500.95) une iframe de la barre de défilement restera toujours de place et ne seront pas arrondis. En l'enveloppant dans un div avec trop-plein caché ne fonctionne pas non plus. La barre de défilement apparaît à un débordement du récipient. Firefox et IE fonctionnent très bien.

    OriginalL'auteur

  2. 0

    Peut-être que si vous l'utilisez correctement avec une "couverture" de l'image. Certains thèmes modernes offrent ce.

    Pas la meilleure solution. Quel est votre objectif ?

    OriginalL'auteur

  3. 0

    Vous pouvez également l'ajouter à la balise iframe si votre balise de style en ligne: 

        <iframe 
    width=\"100%\" height=\"100%\"
    frameborder=\"0\" style=\"border:0;border-radius: 25px\";
    src=". $locationlink ." allowfullscreen>
    </iframe>

    OriginalL'auteur

  4. -2

    Essayez d'ajouter ceci dans votre CSS:

    iframe {
    border-radius: 10px;
}

    OriginalL'auteur