2020.10.4 盒子阴影及hover的使用 圆形边框 文字阴影 浮动开始
盒子阴影
box-shadow{
h-shadow: px;(阴影水平距离)
v-shadow: px;(阴影垂直距离)
blur: px;模数程度
spread: px; 模糊区域大小
color: ;(阴影颜色)
可加上inset(阴影放在图形内部)
复合写法:
box-shadow{
h-shadow v-shadow hurl spread color}
hover的应用
div-hover{
}(当鼠标经过div盒子时发生改变)
文字阴影
text-shadow{
h-shadow v-shadow hurl spread color}(和box-shadow相同)
圆形边框
border-radius: px;
(输入的像素 为 方形盒子四个角弧度圆形的半径,半径越大弧度越大)
1.圆形的制作: border-radius为 方形边长的一半
2.圆矩形
border-radius为矩形短边的一半
3.不规则角
border-radius{
左上角px 右上角px 右下角px 左下角px
}
/
//
/
//
/
//
/
/
/
浮动
网页布局方法
1标准普通流/文档流:
块级元素独占一行从上向下
行级元素从左往右排列
浮动和定位
浮动的特性
1.脱离标准流,移动到指定的位置
2.不再保留原来的位置,被其他标准流占用
3.浮动的盒子都是在一行显示
4.float可以让元素具有行内块元素的特性:如果没有指定宽度 就会随着内容增减宽度
浮动布局方法
常常和标准流父级相结合:
先用标准流排列上下位置,再用浮动将盒子放在父级盒子中