一個關于border-radius值設置的問題記錄

ssshooter 發布于2019-08-30 11:00 / 644人閱讀

摘要：按理說應該有明顯的弧度了啊，全設置成看看呢對啊，這是應該有的弧度，為什么改成左邊寫成就變樣了呢，難道跟有關帶著疑問，我看了看百度。

問題記錄

今天本打算要完成一個類似于進度條的小組件，原型是這樣的(這里長200px, 高28px)

我一看，很簡單嘛，拋開那個數字1樣式不談，整體父級樣式就是一個左邊半圓形，右邊帶有弧度的div啊。
這個用css的border-radius就可以搞定了啊。左邊是圓角，圓角50px啊，右邊是小圓角，以往的div都是8px弧度的。根據border-radius中角的順序(以順時針的方向解析，上左，上右，下右，下左)，設置border-radius: 50px 8px 8px 50px;就好了啊。滿心歡喜寫好樣式，打開瀏覽器。

傻了，不對啊，我原以為是這樣的

實際上，瀏覽器中是這樣的

不對了啊，右邊的角度設置了啊，怎么看起來跟沒設置一樣呢，我把8改成了10px在試了下，還是差不多跟沒設置一樣的。

8px按理說應該有明顯的弧度了啊，全設置成8px看看呢

對啊，這是8px應該有的弧度，為什么改成左邊寫成50px就變樣了呢，難道跟50px有關？帶著疑問，我看了看百度。

百度說，其實border-radius的完整寫法（w3c）是　

border-radius: 1-4 length|% / 1-4 length|%;

平時我們寫的border-radius : 50px，其實完整的寫法應該是：

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的四個數值表示圓角的水平半徑，后面四個值表示圓角的垂直半徑

每個順序一一對應 (水平半徑：左上右上右下左下)/(垂直半徑：左上右上右下左下)，

什么是水平半徑和垂直半徑呢？

根據水平半徑跟垂直半徑的比值，可以調整角的弧度，兩者半徑相同，就是個圓角。這就是問什么我平時設置的角都是圓角的原因，因為我沒有寫完整過

例如 border-radius:10px 20px 30px 40px/40px 30px 20px 10px

就是這樣的樣子

再來回頭看我們之前的問題

我們忽略了高度28px了啊. 這樣算來，我們要設置右邊是個半圓形，只要水平跟垂直半徑都是14px不就好了嗎

border-radius: 14px 8px 8px 14px / 14px 8px 8px 14px;

這樣，父級樣式不就對了嗎。

之前右邊設置的8px圓角看起來沒有效果，可能跟50px比起來，被等比例壓縮了吧，因為左邊本來就高28px，塞了個半徑50px進去，我算算（14 * 8 / 50 = 2.24）, 就等于設置成了

border-radius: 14px 2.24px 2.24px 14px / 14px 2.24px 2.24px 14px;

以后寫樣式要當心了啊，小問題也不小啊。

云服務器 GPU云服務器解析的記錄值域名的記錄值怎么填域名中的記錄值關于javascript的問題

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

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

前端入門-day2（常見css問題及解答）

摘要：寫在前面今天是入門前端的小伙伴們應該已經看了一些的基礎和的基礎了，是不是遇到了很多關于的問題呢。因為很少有太復雜的問題，所以直接寫一篇關于的常見問題及解答啦和的區別簡單來說不會再占據空間，就跟不存在一樣。 showImg(https://segmentfault.com/img/remote/1460000016762552); 寫在前面今天是入門前端的day2, 小伙伴們應該已經看...

tuantuan 2019-08-29 17:02 評論0 收藏0
[探索]在開發中盡量提高代碼的復用性

摘要：提高代碼的復用性，應該是不同場景，不同解決方案的。不建議強制提高代碼復用性，如果提高代碼復用性會大大的降低代碼的可讀性，維護性，可能會得不償失。 ctrl+c 和 ctrl+v 給我們帶來了很多的便利，但是也使我們變得懶惰，不愿思考。 1.前言相信很多人和我一樣，在開發項目的時候，因為項目趕，或者一時沒想到等原因。頻繁使用 ctrl+c 和 ctrl+v ，導致代碼很多都是重復的。這...

Cheriselalala 2019-08-29 16:54 評論0 收藏0
[探索]在開發中盡量提高代碼的復用性

摘要：提高代碼的復用性，應該是不同場景，不同解決方案的。不建議強制提高代碼復用性，如果提高代碼復用性會大大的降低代碼的可讀性，維護性，可能會得不償失。 ctrl+c 和 ctrl+v 給我們帶來了很多的便利，但是也使我們變得懶惰，不愿思考。 1.前言相信很多人和我一樣，在開發項目的時候，因為項目趕，或者一時沒想到等原因。頻繁使用 ctrl+c 和 ctrl+v ，導致代碼很多都是重復的。這...

Keagan 2019-08-02 11:38 評論0 收藏0
[探索]在開發中盡量提高代碼的復用性

摘要：提高代碼的復用性，應該是不同場景，不同解決方案的。不建議強制提高代碼復用性，如果提高代碼復用性會大大的降低代碼的可讀性，維護性，可能會得不償失。 ctrl+c 和 ctrl+v 給我們帶來了很多的便利，但是也使我們變得懶惰，不愿思考。 1.前言相信很多人和我一樣，在開發項目的時候，因為項目趕，或者一時沒想到等原因。頻繁使用 ctrl+c 和 ctrl+v ，導致代碼很多都是重復的。這...

wind3110991 2019-08-23 12:14 評論0 收藏0
PostCSS自學筆記（二）【番外篇一】

摘要：通過配置規則和單位使用或來解決。其他關于我個人的一系列學習介紹及總結有興趣可以參閱自學筆記一安裝使用篇自學筆記二插件篇自學筆記二番外篇一自學筆記二番外篇二利用PostCSS解決移動端REM適配問題上一期有提到結合postcss-px2rem插件來處理移動端適配的方案，以及相關的避坑方法，之后總覺得這個解決方案問題太多，也就誕生了另一套方案運用postcss-pxtorem插件來進行...

Harpsichord1207 2019-08-29 13:17 評論0 收藏0