《css揭秘》筆記(七), 各種各樣的橢圓

2021-10-06 06:15:02 字數 1430 閱讀 7416

為任何正方形元素設定乙個足夠大的border-radius,就可以把它變成乙個圓:

background

: #fb3;

width

: 200px;

height

: 200px;

border-radius

: 100px;

border-radius指定了我們要得到的圓的半徑,但是這一數值在大於一半容器大小的情況下,依然會得到乙個圓。

然而我們更希望它能根據其內容自動調整並適應。在這個案例中,我們希望得到乙個能依據寬高變形為橢圓或圓的自適應圓。

border-radius存在乙個效果:它可以單獨指定水平與垂直的半徑,只需要用乙個斜槓(/)分隔這兩個值即可。這個特性允許我們在拐角處建立橢圓圓角。

如果border-radius的寬高是容器的寬高的一半,那麼將得到乙個精確的橢圓,恰好border-radius允許使用百分比值:

border-radius

: 50% / 50%;

然而由於border-radius的寬高被設定成了同樣的50%,我們可以使用更加簡潔的方式。

border-radius

: 50%;

現在我們能夠生成乙個自適應的橢圓了,接下來我們要生成的是半橢圓形。

border-radius允許我們用展開的方式,分別設定它每個角的值:

我們仍可以使用border-radius這個簡寫方式,只是需要用空格來隔開為每個角設定的值,另外,這四個值會分別從左上角開始以順時針順序應用到元素的拐角。

如果要為四個角設定不同的水平和垂直半徑,方法是在斜槓前指定14個值,在斜槓後指定另外14個值。斜桿前設定的垂直半徑,斜槓後是水平半徑。

如果我們需要得到乙個垂直的半橢圓形,就需要考慮為元素每個角設定的border-radius的情況,由於這個半橢圓形是垂直的,則它的左右兩邊對稱,唯一需要注意的應當是下面兩個角的垂直半徑設定成0,上邊兩角設定成100%,水平的半徑每個角都為50%(要多想)。

和半橢圓形的設定是一樣的,無非是每個角的border-radius設定的不一樣。

各種各樣的飛鴿傳書

它不只只是乙個軟體,它原來是一位來自自然界的通訊員,現在的它也很理所當然地成為了電影明星,我們最好用的區域網聊天 軟體飛鴿傳書 看看它有多麼多麼的厲害。鴿子懂得 扮鬼扮馬 那傳統的信鴿演技如何呢?電影 赤壁 上集,諸葛亮放飛乙隻鴿子,然後以鴿子的視野來展示曹營的狀況。看了之後,你是不是也很想養只信鴿...

各種各樣的「牛」名翻譯

農曆己丑年是 牛 年,就來說說牛的事。在中文裡,牛 大致有兩層意思,一是作為動物的牛,也就是 說文 裡所說的 大牲也 二是與動物無關的牛,或者說轉義的牛。與動物無關的牛,暫且不論,今天就說說作為動物的這個牛。其實,中文的 牛 自古以來就是這麼簡單,幾乎沒有什麼變化。不僅牛本身這麼簡單,所有和牛有關的...

Game 各種各樣的法師英文詳解

在當前常用的dnd和由其引申的大多數規則中,這些法師有著比較大的區別necromancer 泛指使用死靈法術的亡靈系專精法師,約等同於dnd中的死靈系專精法師,代表技能是召喚死靈,死亡一指,吸血術 mage 泛指一般意義上的法師。使用魔法書來抄寫和記載魔法,釋放魔法需要提前準備 sorcerer 在...