語法
box-shadow:h-shadow v-shadow blur spread color inset;
屬性值 |
特點 |
h-shadow |
必需,水平陰影位置,可負 |
v-shadow |
必需,垂直陰影位置,可負 |
blur |
可選,模糊距離(虛實) |
spread |
可選,陰影尺寸(大小) |
color |
可選,陰影顔色rgba(0,0,0,.3) |
inset |
可選,将外部陰影(outset)改為内部陰影 |
- 默認為外陰影(outset),但是不可以寫這個單詞,否則無效
- 盒子陰影不占用空間,不會影響其他盒子排列
- 鼠标經過div為div:hover {box-shadow: 10px 10px;}
2.文字陰影(text-shadow)
語法
text-shadow:h-shadow v-shadow blur color;
三、圓角邊框(border-radius)
語法
border-radius:length;
- 半徑原理:圓與邊框的交集形成圓角效果
- 參數值可以為數值或百分比形式
- 若為正方形,想設置為圓,把數值改為高/寬的一半,或直接寫為50%
- 若為矩形,設為高的一半即可
- 該屬性是一個簡寫屬性,可以跟四個值,分别代表左上角,右上角,右下角,左下角
- 分開寫:border-top-left-radius | border-top-right-radiusborder-bottom-left-radius | border-bottom-right-radius
,