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可以让元素具有行内块元素的特性:如果没有指定宽度 就会随着内容增减宽度

浮动布局方法

常常和标准流父级相结合:
先用标准流排列上下位置,再用浮动将盒子放在父级盒子中