關於border屬性的小技巧 製作三角形

2022-01-16 06:53:01 字數 1959 閱讀 3190

標籤的border屬性包含了4根邊框,而每根邊框的交界處是斜45度,不是水平垂直相交,如下圖:

利用這種特性,可以把div標籤的高寬設為0,border設為大於0的畫素,這樣border就變為了乙個色塊,通過 border-color: 顏色/transparent來控制四個方向上的顏色或者是不是顯示,4個顏色/transparent分別控制上右下左,順時針方向

1

該**讓下方border消失,如果再讓右邊border消失,則會在在左上角形成乙個邊為50px的等腰三角形,再讓左邊消失,那就會在正上方形成乙個更小的三角形:

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>無標題文件

title

>

6<

style

>

7div

17style

>

18head

>

1920

<

body

>

21<

div>

div>

22body

>

23html

>

最終效果如圖:

以下這段**執行後可生成由四個大小不一的三角形組成的樹木:

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>無標題文件

title

>

6<

style

>

7#div

11.div1

18.div2

28.div3

38.div4

48.div5

57style

>

58head

>

5960

<

body

>

61<

div

id="div"

>

62<

div

class

="div1"

>

div>

63<

div

class

="div2"

>

div>

64<

div

class

="div3"

>

div>

65<

div

class

="div4"

>

div>

66<

div

class

="div5"

>

div>

6768

div>

69body

>

70html

>

最終效果:

16進製製小技巧

看最高那個數大於8那麼就是負數,否則為正數。異號相加是不可能溢位的 同號相加變成其相反的號就溢位了。負數用十六進製制表示,通常用的是補碼的方式表示.十六進製制 英文名稱 hexadecimal 是計算機中資料的一種表示方法。同我們日常生活中的表示法不一樣。它由0 9,a f組成,字母不區分大小寫。與...

css中的border屬性。。。。。

1.border color 邊框的顏色 一般設定邊框都有3個屬性 寬度 線的樣式 顏色,如果寬度設定了很多px,那麼就可以給邊框設定很多顏色,讓邊框顯示出漸變的效果,不過設定邊框不同顏色時只能通過border bottom colors,border top colors,border left ...

關於select where 的小技巧

大家在寫sql 語句的時候,如果是 select where 型別的語句,有注意到條件的前後順序嗎?我今天做個小實驗。比如查詢位址裡 包含 海口市 及 振興路 兩個關鍵字的資料,一般時候可能會用 select from dm addr where addr like 海口市 and addr lik...