CSS中你可能不知道增加特效的样式合集

最新推荐文章于 2024-02-14 11:18:48 发布

IG_hyt

最新推荐文章于 2024-02-14 11:18:48 发布

阅读量154

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/IG_hyt/article/details/124438939

版权

这篇博客详细介绍了CSS中的背景图片大小设置，包括`cover`和`contain`的使用，以及百分比和固定尺寸的设定。同时，文章还探讨了文字阴影和盒子阴影的实现，如`text-shadow`和`box-shadow`属性的用法。此外，还讲解了CSS过渡效果，如何通过`transition`属性实现元素平滑变化，结合`hover`伪类实现鼠标悬停时的动态效果。

摘要由CSDN通过智能技术生成

背景图大小

background-size : cover / contain / 百分比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片大小</title>
    <style>
        .box {
            width: 1000px;
            height: 300px;
            background-color: orange;
            border: 2px solid #000;
            background-image: url(./images/jd.jpg);
            background-repeat: no-repeat;
            /* 背景图片大小 */
            /* background-size: 宽度 高度; */
            /*contain 背景图片等比例缩放  显示完整 有可能不能铺满整个盒子 */
            /* background-size: contain; */
            /* cover 背景图片等比例缩放  可以铺满盒子 背景图片可能显示不全*/
            /* background-size: cover; */
            /* 数字 1个值  代表宽度 高度默认auto 等比例缩放*/
            background-size: 400px;
            /* 数字 2 个值  第一个值表示 宽度 第二个值表示高度*/
            background-size: 400px 200px;
            /* 百分比 参考是盒子的宽高 */
            background-size: 50% 50%;
            background-size: 100% 100%;
        }
    </style>
</head>

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

</html>

背景连写 :

background : color image repeat position size

文字阴影

text-shadow: 水平阴影 垂直阴影 模糊距离  阴影颜色;
text-shadow: -8px 0px 9px red;

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内/外阴影 ;
box-shadow: 2px -10px 6px 5px rgba(0, 0, 0, .5) ;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: auto;
            /* box-shadow: 水平阴影 垂直阴影 模糊距离 阴影面积 阴影颜色 内(inset)/外阴影; */
            box-shadow: -1px 8px 7px 3px rgba(0, 0, 0, .4);
            /* 默认的是外阴影(outset) 但是外阴影的属性值不能写,否则报错 */
        }

        .box:hover {
            /* box-shadow: -1px 8px 7px 3px rgba(0, 0, 0, .4) */
        }
    </style>
</head>

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

</html>

过渡

过渡就是让元素慢慢的发生变化 , 过渡通常搭配hover一起使用transition属性给需要过渡的元素本身加

transition : 过渡属性  过渡时间 ;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡</title>
    <style>
        /* transition属性给需要过渡的元素本身加 */
        /* 谁做过渡给谁加 */
        .box {
            width: 200px;
            height: 150px;
            background-color: red;
            /* transition: 过渡属性 过渡时长; */
            /* 要宽度和高度也需要过渡  */
            /* 让所有的属性都发生过渡 中间逗号隔开 */
            /* transition: width 3s, height 3s; */
            /* all 让所有的属性都可以过渡 */
            /* 过渡时间的单位s不要忘了哦 */
            transition: all 2s;

        }

        .box:hover {
            width: 400px;
            height: 300px;
            background-color: green;
            /* 给hover状态设置 鼠标移入有过渡效果 移除没有效果 */
            /* transition: all 1s; */
        }
    </style>
</head>

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

</html>