亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Css Secrets - 靈活的橢圓

Yangder / 1009人閱讀

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

Flexible ellipses

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

border-radius,這是個(gè) 簡單，實(shí)用的屬性，我們先對它進(jìn)行一個(gè)小小的回顧.

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

border-radius.png

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

這是一個(gè)簡寫屬性，用來設(shè)置?
[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...。

和其他簡寫屬性類似，無法為個(gè)別值設(shè)定為繼承，如?border-radius:0 0 inherit inherit，這會(huì)覆蓋一部分現(xiàn)有定義。在這種情況下只能使用完整屬性來指定。
用法 
Formal syntax: [  |  []](https://developer.mozilla.org...{)1,4}) [ / [  |  []](https://developer.mozilla.org...{)1,4}) []](https://developer.mozilla.org...?)


半徑的第一個(gè)語法取值可取1~4個(gè)值:

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

半徑的第二個(gè)語法取值也可取1~4個(gè)值 :
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；

屬性值

進(jìn)入正題，先畫個(gè)圓壓壓驚：


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

border-radius: 100px;

你或許已經(jīng)發(fā)現(xiàn)了，這里設(shè)置的值，只要大于等于邊的一半就可以了，但到底是為什么呢？

我們看官網(wǎng)的一段描述：

“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 的范圍, 那么 用戶代理就會(huì)相應(yīng)的減小所有的border-radius 的值，直到它們中的任何一個(gè)都不發(fā)生重疊。

通常情況下，我們不會(huì)給一個(gè)元素固定的寬高，因?yàn)槲覀兿敫鶕?jù)內(nèi)容去自適應(yīng)，最終的尺寸我們是不知道的。即使我們要做的是一個(gè)靜態(tài)網(wǎng)站，并且內(nèi)容是固定的，這樣我們可以確定它的尺寸。即使以后某一天，我們想進(jìn)行一些修改，也可以修改字號(hào)來實(shí)現(xiàn)同樣的尺寸。

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

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


  border-radius: 100px / 75px;

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


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

這里還有一個(gè)明顯的問題，我們使用了固定的數(shù)值，當(dāng)內(nèi)容改變導(dǎo)致容器尺寸改變時(shí)，我們希望border-radius也相應(yīng)變化。

border-radius 接受百分?jǐn)?shù)，不僅僅是具體的值。
所以，我們可以把上面的代碼改寫為：

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

因?yàn)?分割線左邊和 右邊的半分?jǐn)?shù)是一樣的，所以也能合并起來：


  border-radius:50% ;

現(xiàn)在我們已經(jīng)知道怎么畫一個(gè)橢圓了，那我們能不能畫出半個(gè)橢圓呢 ？

這必須是當(dāng)然的 ?。

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

border-top-left-radius?

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

給它們賦予不同的值就可以實(shí)現(xiàn)很多奇妙的圖形。

以這個(gè)圖形為例：
它是水平對稱的，所以它的
top-left-radius 和 bottom-left-radius 應(yīng)該是一樣的，

top-right-raidus 和bottom-right-radius 也應(yīng)該是一樣的：

代碼：

 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%;

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

我們可以這樣：

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

可以這樣：

    border-radius:?100% 0 0 0;

這樣：

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

也可以這樣：

或者也可以放大招：

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

結(jié)尾

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116445.html

相關(guān)文章

  • css-secrets (css揭秘) 知識(shí)點(diǎn)目錄，值得深入學(xué)習(xí)！

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

    DevWiki 評論0 收藏0

  • iconfont實(shí)踐小結(jié)

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

    bitkylin 評論0 收藏0

  • <<CSS揭秘>>：自適應(yīng)的橢圓

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

    terasum 評論0 收藏0

  • 用css繪制各種形狀

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

    Lionad-Morotar 評論0 收藏0

  • CSS魔法堂：重拾Border之——不僅僅是圓角

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

    _Dreams 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<