2017-10-21 15 views
-4

J'essaie d'ajouter un rayon de bordure à un bouton mais lorsque j'utilise border-radius: 5px; dans le code CSS ci-dessous, rien ne se passe. Tout le reste fonctionne, c'est juste ce mot-clé qui ne fonctionne pas. Tout ce que j'ai lu dit que c'est comme ça que ça devrait marcher, mais ce n'est pas le cas dans le code ci-dessous. Je ne sais pas si je manque juste quelque chose ci-dessous?Rayon de bordure ne fonctionnant pas dans une classe CSS

HTML:

<button class="button" style="vertical-align:middle"><span>Play</span></button> 

CSS:

html { 
height: 100%; 
} 

body { 
background-image: url("/images/wallpaper.jpg"); 
background-size: 100% 100%; 
background-repeat: no-repeat; 
height: 100%; 
overflow: hidden; 
} 

.heading { 
font-family: Sedgwick Ave Display; 
font-size: 70px; 
color: #cccc00; 
} 
.subH { 
font-family: Cinzel; 
font-size: 8px; 
position: fixed; 
bottom: 0.05px; 
left: 1190px; 
color: white; 
} 

.boxhead a { 
color: #FFFFFF; 
text-decoration: none; 
} 

.button { 
    border-radius: 55px; 
    position: fixed; 
    top: 140px; 
    left: 75px; 
    font-size: 70px; 
    font-family: Sedgwick Ave Display; 
    display: inline-block; 
    background-color: #cccc00; 
    border: none; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 28px; 
    padding: 20px; 
    width: 200px; 
    transition: all 0.5s; 
    cursor: pointer; 
    margin: 5px; 
} 

.button span { 
cursor: pointer; 
display: inline-block; 
position: relative; 
transition: 0.5s; 
} 

.button span:after { 
content: '\00bb'; 
position: absolute; 
opacity: 0; 
top: 0; 
right: -20px; 
transition: 0.5s; 
} 

.button:hover span { 
    padding-right: 25px; 
} 

.button:hover span:after { 
opacity: 1; 
right: 0; 
} 
+0

Essayez d'y ajouter un élément important. Comme 'border-radius: 5px; ! important'. Si cela fonctionne, votre CSS d'origine est remplacé quelque part. Vous devrez peut-être ouvrir la console et trouver des CSS contradictoires. –

Répondre

1

.button { border-radius: 5px; // C'est ce pourquoi ne cela ne fonctionne pas

Et c'est fonctionne pas:

border-radius: 4px; 

... que vous avez quelques lignes plus bas au sein de la même règle , écraser ainsi la valeur précédente.

+0

Il ne fonctionne pas même sans le premier rayon de bordure: 5px; –

+0

Que voulez-vous dire, sans le premier? Vous avez dit que c'était ce qui ne fonctionnait pas. Si ce n'est pas le cas, alors s'il vous plaît allez lire comment créer un [mcve], et éditez votre question, afin que nous puissions reproduire votre problème. – CBroe

+0

Vous aviez raison en disant qu'il y avait deux mots-clés "border-radius", mais même lorsque j'enlevais l'un d'entre eux, il n'y avait toujours pas de rayon de bordure sur le bouton. –