首頁 > 文章 > web前端 > css怎樣設定橢圓

css怎樣設定橢圓

WBOY原創: 2021-11-15 10:05:4912131瀏覽

css設定橢圓的方法：1、為元素新增「{width:寬度值;height:高度值;}」樣式，將元素設為矩形；2、為矩形元素新增「{border-radius :100%;}”圓角樣式將其設為橢圓即可。

css怎樣設定橢圓

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css設定橢圓的方法

1、我們可以先給div元素建立成矩形，然後再使用css的border-radius屬性類設定矩形的圓角，就可以得到橢圓，程式碼如下：

先建立一個矩形

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆</title>
<style>
.ellipse{
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="ellipse"></div>
</body>
</html>

輸出結果：

css怎樣設定橢圓

##2、然後透過border-radius屬性來設定圓角，在ellipse屬性裡加入：border-radius:100%; 即可設定橢圓。

為了相容於各種瀏覽器我們在這裡還要添加

-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;

css怎樣設定橢圓

#程式碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css制作椭圆</title>
<style>
.ellipse{
width: 200px;
height: 100px;
background-color: red;
border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
}
</style>
</head>
<body>
<div class="ellipse"></div>
</body>
</html>

輸出結果：

css怎樣設定橢圓

更多程式相關知識，請造訪：

程式設計影片！！

以上是css怎樣設定橢圓的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎麼讓文字豎的排版下一篇：css怎麼讓文字豎的排版

看更多