圓角邊框
-
border-radius屬性用于設定元素的外邊框圓角
-
border-radius:length; -
radius半徑（圓半徑）原理：圓與邊框的交際形成圓角效果，
-
圓的做法
- 首先，做一個正方形的div
- 其次，讓border-radius的值等于div寬度的一般，或者等于50%
-
div{ width: 300px; height: 300px; border-style: solid; border-color: aqua; /* border:10px; */ /* background-color:pink; */ border-radius: 50%;/*或者是div*/ margin: auto; } -
-
圓角矩形做法
-
首先，做一個矩形div
-
然后讓border-radius值等于高度的一半
-
div{ width：300px； height：150px； background-color;gray; border-radius:75px; } -
-
-
盒子陰影
-
使用box-shadow屬性為盒子添加陰影
-
box-shadow:h-shadow v-shadow blur spread color inset;值 描述 h-shadow 必須，水平陰影的位置，允許負值 v-shadow 必須，垂直陰影的位置，允許負值 blur 可選，橫糊距離 spread 可選陰影尺寸 color 可選，陰影顏色，參考CSS顏色值 inser 可選，將外部陰影（outset）改為內部陰影， 【注意】
-
默認的是外陰影（outset），但是不可以寫這個單詞，否則導致陰影無效
-
盒子陰影不占用空間，不會影響其他盒子排列
-
滑鼠經過時顯示陰影
-
div{ width: 200px; height: 200px; background-color: gray; margin: auto; } div:hover{ box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3); }
-
-
文字陰影
-
使用text-shadow屬性將陰影應用于文本
-
text-shadow：h-shadow v-shadow blur color；值 描述 h-shadow 必須，水平陰影的位置，允許負值 v-shadow 必須，垂直陰影的位置，允許負值 blur 可選，模糊的距離 color 可選，陰影的顏色，參考CSS顏色值 【】不常用，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/108275.html
標籤：Html/Css
上一篇：【強烈推薦】ok-admin 一個好看又好用的后臺模版！！！
下一篇：我的第一篇博客