CSS装饰

最新推荐文章于 2023-12-06 13:38:04 发布

NoFear1015

最新推荐文章于 2023-12-06 13:38:04 发布

阅读量80

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44697506/article/details/131883126

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS装饰

一、垂直对齐 vertical-align

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

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

vertical-align:middle;

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

<!--图片水平垂直居中对齐-->
<html lang="en">
<head
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-color: pink;
            line-height: 400px;
            text-align: center;
        }
        .box img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/code.jpg" alt="">
    </div>
</body>
</html>

二、光标类型 cursor

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

三、边框圆角border-radius

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

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

1、正圆

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

2、胶囊

盒子设置为长方形
设置盒子边框圆角为宽的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .one{
            width: 400px;
            height: 400px;
            background-color: red;
            /* 方式一 */
            border-radius: 50%;
            /* 方式二 */
            border-radius: 200px;
        }
        .two{
            width: 200px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="one">圆</div>
    <div class="two">胶囊</div>
</body>
</html>

四、溢出显示overflow

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

属性值	效果
visible	默认，溢出部分可见
hidden	溢出部分隐藏(用于解决外边距塌陷、浮动的影响)
scroll	无论是否溢出都显示滚动条
auto	根据是否溢出，显示或隐藏滚动条

五、元素本身隐藏

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

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

六、元素整体透明opacity

属性值：

0—1之间的数字；
0完全透明，1完全不透明。

七、精灵图

**精灵图：**将多张小图合并成一张大图。

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

实现步骤：

设置盒子的尺寸和小图尺寸一致；
将精灵图设置为盒子的背景图；
修改背景图位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 24px;
            height: 20px;
            background-image: url('./images/taobao.png');
            background-position: 0 -134px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

八、背景图大小background-size

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

/*语法格式*/
background-size: 宽度 高度;

背景图连写：

background： color image repeat position/size;

九、盒子阴影box-shadow

.div2{
            width: 300px;
            height: 300px;
            background-color: green;
            box-shadow: 0 1px 1px 1px black;
        }

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

十、过渡transition

让元素样式慢慢变化；

一般配合hover使用。

/*使用语法*/
transition 属性 时长, 属性 时长;

属性：所有属性用 all，单个属性用属性名，如width；

时长：数字+s。

注意：

过渡需要默认状态和 hover 样式不同，才能有过渡效果
transition 属性给需要过渡的元素本身加
transition 属性设置在不同状态中，效果不同
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给 hover 状态设置，鼠标移入有过渡效果，移出没有过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 400px;
            height: 100px;
            background-color: pink;
            transition: all 1s;  
        }
        div:hover{
            background-color: green;
            height: 200px;  
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>