Css Secrets - 靈活的橢圓

Yangder 發布于2019-08-30 15:52 / 957人閱讀

摘要：顧名思義，靈活的橢圓。橢圓，是我們今天的主角。所以，在寬高不一致的情況下，我們可以把角做成一個橢圓。接受百分數，不僅僅是具體的值。橢圓有兩個軸軸，四個角。分別是給它們賦予不同的值就可以實現很多奇妙的圖形。

Flexible ellipses

顧名思義，靈活的橢圓。
橢圓，是我們今天的主角。
拿它用來做什么呢？?，對了，拿它做圓角。

border-radius,這是個簡單，實用的屬性，我們先對它進行一個小小的回顧.

?border-radius :
?用來設置邊框圓角。當使用一個半徑時確定一個圓形；當使用兩個半徑時確定一個橢圓，這個(橢)圓與邊框的交集形成圓角效果。

border-radius.png

即使元素沒有邊框，圓角也可以用到?background??上面，具體效果受?background-clip?影響。

這是一個簡寫屬性，用來設置?
[border-top-left-radius
](https://developer.mozilla.org...
?[border-top-right-radius
](https://developer.mozilla.org...
[border-bottom-right-radius
](https://developer.mozilla.org...?，
[border-bottom-left-radius
](https://developer.mozilla.org...。

和其他簡寫屬性類似，無法為個別值設定為繼承，如?border-radius:0 0 inherit inherit，這會覆蓋一部分現有定義。在這種情況下只能使用完整屬性來指定。

用法

Formal syntax: [  |  []](https://developer.mozilla.org...{)1,4}) [ / [  |  []](https://developer.mozilla.org...{)1,4}) []](https://developer.mozilla.org...?)
半徑的第一個語法取值可取1~4個值:

border-radius: radius
border-radius: top-left-and-bottom-right top-right-and-bottom-left
border-radius: top-left top-right-and-bottom-left bottom-right
border-radius: top-left top-right bottom-right bottom-left

半徑的第二個語法取值也可取1~4個值 :
border-radius: (first radius values) / radius

border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left

border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right

border-radius: (first radius values) / top-left top-right bottom-right bottom-left

border-radius: inherit；

屬性值

進入正題，先畫個圓壓壓驚：


  background: #fb3;
  width: 200px;height: 200px;
  border-radius: 100px;

border-radius: 100px;

你或許已經發現了，這里設置的值，只要大于等于邊的一半就可以了，但到底是為什么呢？

我們看官網的一段描述：

“When the sum of any two adjacent border radii exceeds the size of theborder box, user agents must proportionally reduce the used values of allborder radii until none of them overlap.”

—CSSBackgrounds & Borders Level 3

這段話的意思是，如果相鄰的border-radius 值的和超過了border-box 的范圍, 那么用戶代理就會相應的減小所有的border-radius 的值，直到它們中的任何一個都不發生重疊。

通常情況下，我們不會給一個元素固定的寬高，因為我們想根據內容去自適應，最終的尺寸我們是不知道的。即使我們要做的是一個靜態網站，并且內容是固定的，這樣我們可以確定它的尺寸。即使以后某一天，我們想進行一些修改，也可以修改字號來實現同樣的尺寸。

在之前的例子中，我們畫了一個圓，但是如果寬度變大一些，比如150px,那就變成了膠囊了。

所以，在寬高不一致的情況下，我們可以把角做成一個橢圓。


  border-radius: 100px / 75px;

border-radius 接受橫向和垂直兩個方向的參數，可以用斜線（/）去分開。


  width:200px;
  height:150px;
  border-radius: 100px / 75px;

這里還有一個明顯的問題，我們使用了固定的數值，當內容改變導致容器尺寸改變時，我們希望border-radius也相應變化。

border-radius 接受百分數，不僅僅是具體的值。
所以，我們可以把上面的代碼改寫為：

  width:200px;
  height:150px;
  border-radius:50% / 50% ;

因為分割線左邊和右邊的半分數是一樣的，所以也能合并起來：


  border-radius:50% ;

現在我們已經知道怎么畫一個橢圓了，那我們能不能畫出半個橢圓呢？

這必須是當然的 ?。

橢圓有兩個軸 x,y 軸，四個角。
分別是：

border-top-left-radius?

border-top-right-radius?
border-bottom-right-radius?
border-bottom-left-radius?

給它們賦予不同的值就可以實現很多奇妙的圖形。

以這個圖形為例：
它是水平對稱的，所以它的
top-left-radius 和 bottom-left-radius 應該是一樣的，

top-right-raidus 和bottom-right-radius 也應該是一樣的：

代碼：

 width:?8em;
 height:?8em;
 background-color:?#fb3;
 border-top-left-radius:?100% 50%;
 border-top-right-radius:?0px 50%;
 border-bottom-right-radius:?0px 50%;
 border-bottom-left-radius:?100% 50%;

可以簡寫為：

 border-radius:?100% 0 0 100% / 50%;

知道這個，就讓我們愉快的玩耍吧：

我們可以這樣：

  border-radius:?100% 100% 100% 0 / 100% 100% 100% 0;

可以這樣：

    border-radius:?100% 0 0 0;

這樣：

    border-radius:?100% 0 / 50% 0;

也可以這樣：

或者也可以放大招：

這是設計師 simurai設計的，很好玩吧，為了方便訪問，我把它拿了下來，戳這里查看。
這是他在css conf 上的一個演講，Styling with STRINGS ，挺有趣的，有興趣的同學可以看一下。

結尾

//每次結尾都不知道說什么＝＝
border-radius 還有很多有趣的用法，就不多說了。
最后，感謝閱讀，歡迎交流，文中若有表述不準確的地方，也歡迎大力指正，就先到這，本篇結束。

GPU云服務器云服務器最靈活的編程語言 html橢圓形的按鈕 secrets 靈活遷移

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116445.html

css-secrets (css揭秘) 知識點目錄，值得深入學習！

摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0
<<CSS揭秘>>：自適應的橢圓

摘要：自適應的橢圓利用生成橢圓。參考手冊橢圓對一個寬度和高度不同的容器進行如下設置，就得到一個橢圓半橢圓是一個簡寫屬性。分別對應著而實用斜線可以單獨指定水平半徑和垂直半徑。自適應的橢圓利用border-radius生成橢圓。CSS參考手冊橢圓對一個寬度和高度不同的容器進行如下設置，就得到一個橢圓border-radius: 50% showImg(https://segmentfau...

terasum 2019-08-29 11:19 評論0 收藏0
用css繪制各種形狀

摘要：同樣的方法可以實現下面這種布局具體代碼如下通過把改成或，就可以立即得到左側傾斜或右側傾斜的標簽頁。簡單的餅圖的繪制思路是把圓形的左右兩部分指定為上述兩種顏色，然后用偽元素覆蓋上去，通過旋轉來決定露出多大的扇區。自適應的橢圓 1.自適應的橢圓實現方式是通過border-radius這個屬性；border-radius它可以單獨指定水平和垂直半徑。用 / 分隔這兩個值。并且該屬性的值不...

Lionad-Morotar 2019-08-29 12:30 評論0 收藏0
CSS魔法堂：重拾Border之——不僅僅是圓角

摘要：擼代碼實現首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right...

_Dreams 2019-08-30 13:01 評論0 收藏0