十二、CSS 装饰

CSS 装饰

垂直对齐 vertical-align

基线(baseline)：浏览器文字类型元素排版中存在用于对齐的基线

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

vertical-align: middle;

ex:

<style>
    .text {
        border-bottom: 1px solid #ccc;
    }

    .text-baseline {
        vertical-align: baseline;
    }

    .text-top {
        vertical-align: top;
    }

    .text-middle {
        vertical-align: middle;
    }

    .text-bottom {
        vertical-align: bottom;
    }
</style>
<div>
    <span class="text text-baseline">测试测试测试</span>
    <span class="text text-top">测试测试测试</span>
    <span class="text text-middle">测试测试测试</span>
    <span class="text text-bottom">测试测试测试</span>
</div>

浏览器把行内和行内块当做文字处理，文字默认基线对齐

ex1:输入框垂直居中对齐

<style>
    input {
        height: 50px;
    }

    input[type="button"] {
        height: 30px;
    }

    .middle input {
        vertical-align: middle;
    }
</style>

<div>

    <input type="text" />
    <input type="button"
           value="搜索" />
</div>

ex2: 图片垂直居中对齐

<style>
    .box {
        border: 1px solid #ccc;
        width: 500px;
    }

    img {
        height: 200px;
        width: 200px;
    }

    .middle-box {
        margin-top: 20px;
    }

    .middle-box img {
        vertical-align: middle;
    }
</style>

<div>
    <div class="box">
        <img src="" /><input type="button"
               value="搜索" /></div>

    <div class="box middle-box">
        <img src="" /><input type="button"
               value="搜索" /></div>
</div>

ex3: 图片水平垂直居中

<style>
    .box {
        width: 400px;
        height: 400px;
        background-color: skyblue;
        /* 水平居中 */
        text-align: center;
    }

    .box::after {
        height: 100%;
        content: '';
        display: inline-block;
        vertical-align: middle;
    }

    img {
        height: 200px;
        width: 200px;
        /* 垂直居中 */

        /*方式一*/
        vertical-align: middle;
        /*方式二*/
        /* display: block; */
    }
</style>

<div class="box">
    <img src="" />
</div>

光标类型 cursor

属性值	效果
default	默认，箭头
pointer	小手，提示可点击
text	小手，提示可点击
move	十字光标，提示可移动

ex:

<style>
    .cursor--pointer {
        cursor: pointer;
    }

    .cursor--text {
        cursor: text;
    }

    .cursor--move {
        cursor: move;
    }
</style>

<div class="box">
    <div>默认，箭头</div>
    <div class="cursor--pointer">小手，提示可点击</div>
    <div class="cursor--text">工字型，提示可选择</div>
    <div class="cursor--move">十字光标，提示可移动</div>
</div>

边框圆角 border-radius

/* 单值 4个角一样*/
border-radius: 数字px/百分比;

/* 多值 左上角开始，顺时针赋值，没有赋值看对角*/
border-radius: 左上 右上 右下 左下;

（1）正圆

• 盒子必须是正方形
• 设置边框圆角为盒子宽高的一半

ex:

<style>
    .box {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: skyblue;
    }
</style>

<div class="box"></div>

/* 最大值 50% */
border-radius: 50%;

（2）胶囊按钮

• 盒子设置为长方形
• 设置边框圆角为高度的一半

border-radius: height/2;

ex:

<style>
    .box {
        width: 100px;
        height: 50px;
        border-radius: 25px;
        background-color: skyblue;
    }
</style>

<div class="box"></div>

溢出部分效果 overflow

溢出部分：盒子内容部分超出盒子范围的区域

属性值	效果
visible	auto
hidden	溢出部分隐藏
scroll	无论是否溢出都显示滚动条
auto	无论是否溢出都显示滚动条

ex:

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;

        overflow: hidden;
    }
</style>

<div class="box">
    
</div>

元素本身隐藏

/* 占位隐藏 */
visibility: hidden;

/* 不占位隐藏（常用） */
display: none;

<style>
    .box-1 {
        width: 100px;
        height: 100px;
        visibility: hidden;
    }

    .box-2 {
        width: 100px;
        height: 100px;
        display: none;
    }
</style>

<div class="box-1"></div>
<div class="box-2"></div>

ex: 默认隐藏 鼠标悬停显示

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: relative;
    }

    .box:hover .box-qrcode { //鼠标悬停后显示box-qrcode
        display: block;
    }

    .box-qrcode {
        position: absolute;
        top: 100px;
        width: 100px;
        height: 100px;
        background-color: pink;
        display: none;
    }
</style>

<div class="box">
    <div class="box-qrcode"></div>
</div>

元素整体透明 opacity

属性值：

• 0-1 之间的数字；
• 0 完全透明，1 完全不透明

ex：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        opacity: 0.5;
    }
</style>

<div class="box"></div>

半透明

background-color: rgba(0, 0, 0, 0.5);

ex:

<style>
    .box {
        /* width: 100px; */
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
</style>

<div class="box"></div>

精灵图（雪碧图, sprite）

将多张小图合并成一张大图

• 优点：减少服务器发送次数，减轻服务器压力，提高页面加载速度
• 缺点：修改起来比较麻烦

精灵图使用步骤

1.设置盒子尺寸和小图尺寸相同

2.将精灵图设置为盒子的背景图片

3.修改背景图位置

<style>
    .box {
        background-image: url('./img/jd-sprite.png');
        background-repeat: no-repeat;
        background-size: 113px 86.5px;
        width: 36px;
        height: 42px;
        display: inline-block;
        margin-right: 50px;
    }

    .box-1 {
        background-position: 0 0;
    }

    .box-2 {
        background-position: -38.5px 0;
    }

    .box-3 {
        background-position: -77px 0;
    }

    .box-4 {
        background-position: 0 -44.5px;
    }
</style>

<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
<div class="box box-4"></div>

背景图片大小 background-size

background-size: 宽度 高度;

取值	场景
数字+px	简单方便
百分比	相对于当前盒子自身的宽高百分比
contain	包含，背景图等比缩放，直到不会超出盒子的最大，可能有留白
cover	覆盖，背景图等比缩放，直到刚好填满整个盒子没有空白，图片可能显示不全

background 连写

background： color image repeat position/size;

盒子阴影 box-shadow

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，水平偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
color	可选，将阴影改为内部阴影

<style>
    .box {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 50px 8px #ccc;
    }
</style>

<div class="box"></div>

过渡 transition

• 让元素样式慢慢变化
• 常配合 hover 使用

transition 属性 时长, 属性 时长;

参数	取值
过渡属性	所有属性 all；具体属性 width
过渡时长	数字 + s(秒)

注意：

• 过渡需要默认状态和 hover 样式不同，才能有过渡效果

• transition 属性给需要过渡的元素本身加

• transition属性设置在不同状态中，效果不同

  给默认状态设置，鼠标移入移出都有过渡效果

  给hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        transition: all 2s;
    }

    .box:hover {
        width: 200px;
        background-color: pink;
    }
</style>

<div class="box"></div>