css邊框陰影：box-shadow屬性
box-shadow
: h-shadow v-shadow blur spread color inset;
先看一下css3上是怎麼定義的：值
說明h-shadow
必需的。水平陰影的位置。允許負值 (當它為正值的時候表示向右位移一定的距離【出現在元素的右邊】，負值表示向左位移【出現在元素的左邊】)
v-shadow
必需的。垂直陰影的位置。允許負值 (當值為負的時候表示向上偏移一定的距離【出現在元素的上方】；值為正的時候表示向下偏移一定的距離【出現的元素的下方】)
blur
可選。模糊距離（模糊半徑，它的值決定了陰影的模糊程度，也就是毛光）
spread
可選。spread是表示陰影所佔區域的大小
color
可選。陰影的顏色。在css顏色值尋找顏色值的完整列表
inset
可選。從外層的陰影（開始時）改變陰影內側陰影
重點看一下 blur【可選】
blur指的是陰影的模糊半徑。這個值使得陰影部分的過渡看起來更柔和。我們可以試一試不同blur值對陰影效果的影響：
box-shadow
: 10px 10px 5px rgba
(0,0,0,0.9)
/*blur值為5px*/
box-shadow
: 10px 10px 10px rgba
(0,0,0,0.9)
/*blur值為10px*/
box-shadow
: 10px 10px 15px rgba
(0,0,0,0.9)
/*blur值為15px*/
4. spread【可選】，一般不寫
spread表示的是陰影的半徑。我在網上看到有人對spread和blur的區別發出疑問，其實很簡單：blur用於描述模糊半徑，它的值決定了陰影的模糊程度；而spread是表示陰影所佔區域的大小，這是兩個不同的概念。
我們來試試其他屬性值相同的情況下，spread不同時陰影的表現：
box-shadow
: 10px 10px 10px 5px rgba
(0,0,0,0.9)
;/*陰影半徑為5px*/
box-shadow
: 10px 10px 10px 15px rgba
(0,0,0,0.9)
;/*陰影半徑為15px*/
box-shadow
: 10px 10px 10px 25px rgba
(0,0,0,0.9)
;/*陰影半徑為25px*/
inset 【可選】
預設情況下，我們設定的陰影都是外部陰影，而這個屬性值的作用是將外部陰影轉換成內部陰影。
box-shadow
: 10px 10px 10px 5px blue;
/*預設為外部陰影*/
box-shadow
: 10px 10px 10px 5px blue inset;
/*將外部陰影切換為內部陰影*/
一些常見的陰影例子：
spread【可選】，一般不寫
box-shadow
: 10px 0px 10px rgba
(0,0,0,0.9)
/*陰影出現在元素的右側*/ 0 就是表示上下偏移量為零，所以上下沒有陰影
box-shadow
: -10px 0px 10px rgba
(0,0,0,0.9)
/*陰影出現在元素的左側*/
box-shadow
: 0px -20px 10px rgba
(0,0,0,0.9)
/*陰影出現在元素上方*/ 0 就是表示左右偏移量為零，所以左右沒有陰影
box-shadow
: 0px 20px 10px rgba
(0,0,0,0.9)
/*陰影出現在元素下方*/
box-shadow
: 2px 2px 2px #e5e5e5, -1px -1px 1px #e5e5e5; // 給多個邊框新增陰影效果 ，四個邊框都有陰影
邊框上下左右各部位隱藏顯示詳解
1.隱藏下邊框 隱藏下邊框 2.隱藏上邊框 隱藏上邊框 3.隱藏左邊框 隱藏左邊框 4.隱藏右邊框 隱藏右邊框 5.隱藏左右邊框 隱藏左右邊框 6.隱藏上下邊框 隱藏上下邊框 7.只顯示上邊框 只顯示上邊框 8.只顯示下邊框 只顯示下邊框 9.只顯示左邊框 只顯示左邊框 10.只顯示右邊框 只顯示右...
CSS 上下左右居中筆記
結果 2.彈性盒子flex justify content 內容對齊,屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線 main axis 對齊。justify content flex start flex end center space between space around align ...
android給View設定上下左右邊框
給view控制項設定邊框,可以動態設定上下左右.通過布局檔案就能搞定 1.在drawable資料夾下新建乙個shape main list bg.xml檔案 layer list xmlns android item shape solid android color 00ff00 shape it...