国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css中的有趣的 border

wendux / 774人閱讀

摘要:中的屬性,我想凡是了解一點的都知道它是作用,可以在上找到對它的詳細介紹。看了這么多有意思的,那么對于邊框,你真的了解了嗎最近碰到一個有意思的樣式,讓我對于邊框有了很深刻的了解。

CSS 中的 border 屬性,我想凡是了解一點 CSS 的都知道它是作用,可以在 MDN 上找到對它的詳細介紹。

border

簡單來說,就是我們常用的邊框,一個非常基礎的用法,就是

border: 1px solid black;
// 等價于
border-width: 1px;
border-style: solid;
border-color: black;

下面是演示的效果:

當然還可以定義很多奇形怪狀的邊框類型,比如圓角(radius,可能兼容性不是很好),橢圓(其實只要懂了橢圓,邊框就可以隨意繪制了)。

border 1px solid black;
border-radius: 50%;

border-top,-right,-bottom,-left

看了這么多有意思的 DEMO,那么對于邊框,你真的了解了嗎?

最近碰到一個有意思的 CSS 樣式,讓我對于邊框有了很深刻的了解。平時我們用邊框,基本都要給邊框一個寬度,1px,偶爾2px,并沒有發現邊框與元素之間的關系,當我們把 border-width換大一點的值,問題就來了。

border: 20px solid gray;

并且,邊框是可以多帶帶設置 top,right,bottom,left 的值:

border: 20px solid gray;
border-top-width: 40px;
border-left-width: 40px;

邊框與邊框的交界處該如何來判斷呢?

了解這一點非常重要,如果你也發現了這個問題,那么下面有意思的東西就來了:

border: 20px solid;
border-top-color: black;
border-right-color: red;
border-bottom-color: gray;
border-left-color: blue;

居然是內頂點與外頂點的連線把邊框分開了,如果把元素的 widthheight 都設置成 0,再加一個 radius:

width: 0;
height: 0;
border-radius: 50%;

前面 border-radius 的原理你也應該懂了吧!

有關于 border-radius 的選取,可以看下 SF 上的這個提問 border-radius內外半徑=<邊框寬度時,盒子內邊就成了直角怎么一回事。

用 border 實現箭頭

知道了一些 border 的基本知識,我們就可以實現常見于對話框的箭頭,像下面這種:

這個需要借助于 CSS 中的透明 transparent 來實現,比如我們需要一個向右的箭頭,參考上面 width 和 height 為 0 時的例子,對應的邊框大小 15px,0px,15px,30px,先看下面這個例子

border-width: 15px 0px 15px 30px;
border-color: black gray;
border-style: solid;

這個時候需要把 border-top 和 border-bottom 的顏色設置成透明,

border-color: transparent gray;

那么,對于的其他三個角度的箭頭也可以以同樣的方式設計出來:

總結

看了這篇文章,是不是覺得 border 的功能非常強大,其實我們常見的一些氣泡和形狀都可以用 border 來實現,哈哈,非常鄙視那些用圖片的同學。共勉。

參考

CSS Refreshers: Borders

歡迎來我的博客交流。

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

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

相關文章

  • css有趣 border

    摘要:中的屬性,我想凡是了解一點的都知道它是作用,可以在上找到對它的詳細介紹。看了這么多有意思的,那么對于邊框,你真的了解了嗎最近碰到一個有意思的樣式,讓我對于邊框有了很深刻的了解。 CSS 中的 border 屬性,我想凡是了解一點 CSS 的都知道它是作用,可以在 MDN 上找到對它的詳細介紹。 border 簡單來說,就是我們常用的邊框,一個非常基礎的用法,就是 border: 1px...

    FingerLiu 評論0 收藏0
  • 淺談CSS3 box-sizing 屬性 有趣盒模型

    摘要:盒模型的組成大家肯定都懂,由里向外盒模型是有兩種標準的,一個是標準模型,一個是模型。指定元素的寬度和高度最小最大屬性適用于的寬度和高度。盒模型的組成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有兩種標準的,一個是標準模型,一個是IE模型。 ?從上面兩圖不難看出在標準模型中,盒模型的寬高只是內容(content)的寬高, 而在IE模型中盒模型...

    K_B_Z 評論0 收藏0
  • 有趣CSS彈跳動畫

    摘要:舉一反三,我們也可以把角度反轉,就會往另外一邊彈跳。如果我們把動畫里頭添加,就會變成線性的連續方式喔。 這是只用了一個div來做的小動畫,純粹利用CSS3的animation來完成,就像是一個正方形在地上彈跳,碰到地面的時候尖角還會壓縮變圓,陰影的部分也會隨著正方形升高而縮小,至于到底該怎么完成呢?讓我們繼續看下去。 利用偽元素 由于只使用了一個div,要同時達到正方形旋轉與陰影縮放的...

    alaege 評論0 收藏0
  • 有趣CSS彈跳動畫

    摘要:舉一反三,我們也可以把角度反轉,就會往另外一邊彈跳。如果我們把動畫里頭添加,就會變成線性的連續方式喔。 這是只用了一個div來做的小動畫,純粹利用CSS3的animation來完成,就像是一個正方形在地上彈跳,碰到地面的時候尖角還會壓縮變圓,陰影的部分也會隨著正方形升高而縮小,至于到底該怎么完成呢?讓我們繼續看下去。 利用偽元素 由于只使用了一個div,要同時達到正方形旋轉與陰影縮放的...

    edgardeng 評論0 收藏0
  • 有趣 box-decoration-break

    摘要:可選取值只有兩個默認取值換行示例這個屬性通常作用于內聯元素。 這兩天接觸到一個很有意思的 CSS 屬性 -- box-decoration-break。下面就一起去一探究竟。 因為 MDN 上關于這個屬性,沒有中文文檔,所以一直在想一個合理貼切的中文翻譯。直譯一下: box -- 盒,可以理解為元素盒模型 decoration -- 裝飾,理解為元素樣式 break -- 斷行,參考...

    cooxer 評論0 收藏0

發表評論

0條評論

wendux

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<