陰影總結
html元素大多都可以新增邊框，邊框主要有三個屬性：
屬性說明
border-width
邊框寬度，可指定四邊、上下-左右、上-右-下-左 等
border-style
邊框樣式，可指定四邊、上下-左右、上-右-下-左 等
border-color
邊框顏色，可指定四邊、上下-左右、上-右-下-左 等
其中 邊框樣式 可選值如下：
取值說明
none
不顯示邊框；如果存在其他的重疊邊框，則會顯示為那個邊框
hidden
不顯示邊框；如果存在其他的重疊邊框，邊框不會顯示
dotted
顯示為一系列圓點
dashed
顯示為一系列短的方形虛線
solid
顯示為一條實線
double
顯示為一條雙實線
groove
顯示為有雕刻效果的邊框，樣式與 ridge 相反
ridge
顯示為有浮雕效果的邊框，樣式與 groove 相反
inset
顯示為有陷入效果的邊框，樣式與 outset 相反
outset
顯示為有突出效果的邊框，樣式與 inset 相反
下面是個簡單的演示：
border的每個屬性或者每個邊都可以單獨設定，所以常常可以見到border-width、border-style、border-color、border-bottom、border-left……等屬性，更進一步的甚至還可以使用border-bottom-color……等屬性：
除了簡單的線條作為邊框，我們還可以使用影象作為邊框，看下面演示：
border-image中有好幾個引數可選，有些引數相對來說還是有些複雜的，詳細的介紹可以參考別的文章：
除了上面的幾個基本屬性外我們還可以通過border-radius來設定邊框圓角。border-radius這個屬性不光是用於邊框的，還會作用於元素背景。常見的圓角按鈕、圓角輸入框等就是通過這個屬性實現的：
border-radius也可以分開來寫成border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius這四個，分別控制四個角的狀態：
border-radius甚至還能單獨定義每個圓角水平和垂直方向的半徑：
在網頁上的某些元素獲得焦點時會出現outline，outline和border很多方面都比較像，都有width、color、style等屬性。兩者的主要區別在於應用場景不同。另外outline不佔據空間，不影響元素在布局中的位置。
介面設計中陰影是經常會用到的。css中box-shadow主要有下面一些屬性：
屬性說明
h-shadow
必需，取值正負都可，陰影的水平位置
v-shadow
必需，取值正負都可，陰影的垂直位置
blur
可選，只能取正值，陰影模糊半徑，0即無模糊效果，值越大陰影邊緣越模糊
spread
可選，取值正負都可，陰影的周長向四周擴充套件的尺寸，正值，陰影擴大，負值陰影縮小
color
可選，陰影的顏色
inset
可選，將外部投影(預設outset)改為內部投影，inset 陰影在背景之上，內容之下
下面是個簡單的演示：
box-shadow的幾個引數大多都挺容易理解的，稍微麻煩點的就是blur和spread，這裡簡單進行下介紹。在blur和spread都為0的情況下陰影的大小等同於元素本體的大小，而spread可以擴充套件或縮小該陰影的大小，blur是在已經計算了spread的陰影大小上向內和向外進行模糊處理。可以參考下面圖示：
box-shadow可以疊加使用，可以實現一些非常好看的效果：
>Html CSS前端實現文字邊框陰影效果
一.邊框陰影 box shadow 邊框陰影 引數 引數1 x shadow 設定物件的陰影水平偏移值，單位可以是px em或百分比等，允許負值。引數2 y shadow 設定物件的陰影垂直偏移值，單位可以是px em或百分比等，允許負值程式設計客棧。引數3 blur 用於設定邊框陰影半徑大小。引數...
圓角邊框和盒子陰影
語法 border radius lenth 其中每乙個值可以為數值或百分比的形式 技巧 讓乙個正方形變成圓圈 以上效果圖矩形的圓角，就不要用百分比了，因為百分比是表示高度和寬度的一半 而我們這裡矩形就只用高度的一般就好了。精確單位 語法 box shadow 水平陰影 垂直陰影 模糊距離 虛實 陰...
給UIImageView新增陰影和邊框
給uiimageview新增陰影和邊框 uiimageview iconview uiimageview alloc init 新增邊框 calayer layer iconview layer layer.bordercolor uicolor whitecolor cgcolor layer.b...