邊框半徑在CSS類中不工作

-4

我正在嘗試將邊框半徑添加到按鈕，但是當我在下面的CSS代碼中使用border-radius: 5px;時，沒有任何反應。其他的工作，只是一個關鍵字沒有。我讀過的所有內容都說明它應該如何工作，但它不在下面的代碼中。我不知道我是否錯過了下面的東西？邊框半徑在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; 
}

來源

2017-10-21 Casimir Kash

嘗試追加重要。像'border-radius：5px; ！important'。如果這個工作，你的原始CSS正在被重寫的地方。您可能需要打開控制檯並發現衝突的CSS。 –

.button { 邊界半徑：5像素; //這是行不通

這就是爲什麼它不工作：

border-radius: 4px;

...你有幾行相同的規則內進一步下跌，從而覆蓋以前的值。

來源

2017-10-21 02:45:32 CBroe

即使沒有第一個邊框半徑，它也不起作用：5px; –

你是什麼意思，沒有第一個？你說_那是什麼不起作用。如果不是這樣，那麼請閱讀如何創建[mcve]，並編輯您的問題，以便我們可以真正重現您的問題。 – CBroe

你說的有兩個「border-radius」關鍵字是正確的，但即使我從代碼中刪除了其中的一個，但按鈕上仍然沒有邊框半徑。 –

邊框半徑在CSS類中不工作

回答

相關問題