CSS / 圆角边框+阴影+浮动

目录

圆角边框

盒子阴影

文字阴影

传统网页布局的三种方式

浮动

浮动特性

浮动元素经常和标准流父级搭配使用

常见的网页布局案例

浮动布局注意点

---

圆角边框

语法：border-radius: 半径;

radius是圆的半径

参数值可以是精确数值或百分比 50%为宽度和高度的一半

可以设置不同的圆角

border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下 顺时针

两个值 是对角线 10px 20px 左上右下是10 右上左下是20

三个数值 左上 右上左下 右下

也可以单独设置 border-top（bottom）-left（right）-radius

top和left不能颠倒

盒子阴影

box-shadow: h-shadow v-shadow blur spread color (inset)

h-shadow 必需 水平阴影 允许负值

v-shadow 必需 垂直阴影 允许负值

blur 可选 模糊距离

spread 可选 阴影尺寸

color 可选 阴影颜色

inset 可选 将外部阴影改为内部阴影 (不可以写outset）

影子不占用盒子空间

鼠标悬停显示阴影用 div:hover

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); */
            /* 水平 垂直 模糊 尺寸 颜色 */
        }

        div:hover {
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
        }
    </style>

文字阴影

text-shadow: h-shadow v-shadow