一.邊框：border 設置對象邊框的特性。
1.語法：border：length style color
2.style：none ，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset。
二.相關屬性。
1.border-width：設置邊框寬度：常用取值：medium：默認值，相當於3px。thin：1px。thick：5px。不可以爲負值。
2.border-color:設置邊框顏色。
3.border-top:設置頂部邊框。border-top-width,border-top-style,border-top-color 分別設置 寬度，樣式以及顏色
4.border-right：設置右邊框。
5.border-bottom：設置底邊框。
6.border-left：設置左邊框。
7.border-radius：設置對象使用圓角邊框。取值爲數字或者百分比。
8.當然也可以給4個角單獨的設置：
左上角：border-top-left-radius，右上角：border-top-right-radius，左下角：border-bottom-left-radius，右下角：border-bottom-right-radius
9.box-shadow:設置對象陰影。
第一個值：設置水平方向陰影偏移量。
第二個值：設置垂直方向陰影偏移量。
第三個值：設置對象的陰影模糊值。不允許爲負值
第四個值：設置對象的陰影外延值，不允許爲負值
第五個值：color。
第六個值：inset，陰影在左上位置，如下圖：box-shadow:6rpx 6rpx 6rpx 6rpx rebeccapurple inset
10.border-image：對象的邊框樣式使用圖片來填充。
1>border-image-source:設置圖片的來源。使用絕對或者相對地址或者漸變色來確定圖片。
2>border-image-slice :設置邊框背景圖的分隔方式。取值：數值／百分比 fill.該屬性指定從上右下左來分割圖片，將圖像分成4個角，4條邊以及中間區域。中間區域始終是透明的，除非使用關鍵字fill。
3>border-image-width:設置邊框背景的寬度。用於指定使用多厚的邊框來承載唄裁剪後的圖像。
4>border-image-outset：設置對象的邊框背景圖的擴展，意思就是說假如設置了10rpx，那麼圖像就會在原來基礎上外延10rpx在顯示。
5>border-image-repeat：設置對象的邊框圖片的平鋪方式。
stretch:拉伸。
repeat：平鋪，碰到邊界的時候截斷。
round：根據邊框的尺寸動態調整圖片的大小，使得剛好可以鋪滿整個邊框。
space：根據邊框的尺寸動態調整圖片的之間的間距，使得剛好鋪滿整個邊框。
三.使用示例
可以生成箭頭。
.hd {
content: "";
height: 16rpx;
width: 16rpx;
border-width: 4rpx 4rpx 0 0;
border-color: red;
border-style: solid;
transform: rotate(-45deg);
position: absolute;
top: 20rpx;
left: 30rpx;
}
.hd:hover {
transform: rotate(135deg);
}<view class="hd"></view>
重點是：content 設置爲空
效果圖：
