一、Css border 邊框定義和使用

定義和用法

border 簡寫屬性在一個聲明設置所有的邊框屬性。

可以按順序設置如下屬性：

border-width ：

border-width 簡寫屬性為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。

只有當邊框樣式不是 none 時才起作用。如果邊框樣式是 none，邊框寬度實際上會重置為 0。不允許指定負長度值。

border-style

值	描述
none	定義無邊框。
hidden	與 "none" 相同。不過應用于表時除外，對于表，hidden 用于解決邊框沖突。
dotted	定義點狀邊框。在大多數瀏覽器中呈現為實線。
dashed	定義虛線。在大多數瀏覽器中呈現為實線。
solid	定義實線。
double	定義雙線。雙線的寬度等于 border-width 的值。
groove	定義 3D 凹槽邊框。其效果取決于 border-color 的值。
ridge	定義 3D 壟狀邊框。其效果取決于 border-color 的值。
inset	定義 3D inset 邊框。其效果取決于 border-color 的值。
outset	定義 3D outset 邊框。其效果取決于 border-color 的值。
inherit	規定應該從父元素繼承邊框樣式。

border-color： css顏色值

1.常見使用方式

border: border-width  border-style  border-color;

border-top:border-top-width  border-top-style  border-top-color;

border-right:border-right-width  border-right-style  border-right-color;

border-bottom:border-bottom-width  border-bottom-style  border-bottom-color;

border-left:border-left-width  border-left-style  border-left-color;

2. 常見框樣式和屬性

二、 Css 邊框 實現三角形

1.內容為空，邊框設置大值

        .caret {
            width: 0;
            height: 0;
            border-top: 50px solid black;
            border-right: 50px solid red;
            border-bottom: 50px solid green;
            border-left: 50px solid blue;
        }

2. 梯形，臺階

.caret {
  width: 50px;
  height: 50px;
  border-top: 50px solid black;
  border-right: 50px solid red;
  border-bottom: 50px solid green;
  border-left: 50px solid blue;
}

3. 三角形，其他邊框設置透明色 transparent

.caret {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: black;
}

/* 不設置border-bottom即可 */
.caret {
  width: 0;
  height: 0;
  border-top: 50px solid black;
  border-right: 50px solid red;
  border-left: 50px solid blue;
}

可以實現的三角樣式如下：

更多：

CSS3 box-sizing 屬性

CSS3漸變(Gradients)-線性漸變

border-radius實例2

總結

以上是生活随笔為你收集整理的Css3 border 详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。