簡單實用的css邊框屬性border

2021-09-14 02:05:54 字數 1020 閱讀 6408

本文主要講述利用border屬性做出不同的幾何形狀從而適用於比較好看的視覺樣式。

預備知識
border相關屬性

案例舉例
為了更加通俗易懂，demo用的是最簡單的dom元素和css屬性

商品介紹


商品評價


.border


.border-left


.border-icon


.border-right
上面的css**重點在於左邊較深顏色與右邊較淺顏色中間有乙個三角形.border-icon

介紹


.content


.border


.text


.small-********


.big-********
上面的css**重點在於左邊較深顏色的小三角.small-********和底部的三角.big-********

原理解析
那麼border屬性是如何變化出不同的幾何形狀呢？

.border1
看看上述樣式產生的是乙個什麼樣子的內容

我們通過border-widthborder-color可以任意變化每一條變的寬高，和顏色。

任意組合就能組成不同的由三角形組成的其它幾何形狀了。

好好學習，快樂編碼

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格，它的值如下 這個屬性用來設定上下左右邊框的寬度，它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法，它包含bor...

CSS邊框屬性

這個屬性用來設定上下左右邊框的風格，它的值如下 這個屬性用來設定上下左右邊框的寬度，它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法，它包含bor...

CSS顏色屬性，邊框屬性

color name 顏色英文名稱命名 hex方式 十六進製制方式 rgb方式 三原色配色方式 r red 紅色 0 255 g green 綠色 0 255 b blue 藍色 0 255 a alpha 透明度 0 1之間 語法 rgba r,g,b,a h hue 色調 0 或360 表示紅色...