css怎麼寫一個橢圓形按鈕
- WBOY原創
- 2021-11-26 19:06:304900瀏覽
在css中，可以利用width、height和「border-radius」屬性實作一個橢圓形按鈕，寫法為「按鈕元素{width:寬度值;height:高度值;border-radius:100% ;}」。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css怎麼寫一個橢圓形按鈕
#在css中，可以透過border-radius屬性實作橢圓形按鈕。
下面我們透過範例來看一下，範例如下：
首先我們先為按鈕元素新增一個矩形的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆按钮</title>
<style>
.anniu{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<button class="anniu">按钮</button>
</body>
</html>輸出結果：
這時在再利用border-radius屬性將矩形設定為橢圓
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆按钮</title>
<style>
.anniu{
width: 200px;
height: 100px;
border-radius:100%;
}
</style>
</head>
<body>
<button class="anniu">按钮</button>
</body>
</html>輸出結果：
css影片教學）
以上是css怎麼寫一個橢圓形按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn