CSS进阶式-附加样式

最新推荐文章于 2024-04-12 10:21:35 发布

咩Kakao

最新推荐文章于 2024-04-12 10:21:35 发布

阅读量325

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_52142992/article/details/126556333

版权

这篇博客深入探讨CSS的高级特性，包括盒子和字体阴影、2D变换（平移、旋转、缩放、倾斜）、动画效果的应用及@keyframes原理、过渡效果、渐变（普通、角度、线性）以及BFC（Block Formatting Context）的创建、布局规则和解决CSS布局问题的应用。

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

（1）阴影

1、盒子阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式] (inset凹凸);
除了阴影颜色和投影方式，其他值都是以px为单位

<!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{
     
            margin: 0 auto;
            width: 200px;
            height: 200px;
            box-shadow: 2px 2px 10px 5px rgba(231, 4, 4, 0.1);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

2、字体阴影

text-shadow: h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊的距离) color(阴影的颜色);
该属性兼容浏览器：谷歌4.0 火狐3.5 Safari 4.0 Opare 9.6

<!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>
        p{
     
            font-size: 50px;
            line-height: 40px;
            text-align: center;
            text-shadow: 0px 0px 20px rgba(green, green, green, 20%);
        }
    </style>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

（2）2D变换

1、平移

 一个值：(px也可以是其他单位，如em)
	    标准，默认左右平移：transform:translate(num-px);
	    以x轴为准，左右平移：transform:translatex(num-px);
	    以y轴为准，上下平移：transform:translatey(num-px);
两个值：
        分别以x和y轴为准，左右上下平移,第一个为x，第二个为y：transform:translate(num-px,num-px);
        
* num-px：如100px。

2、旋转

默认以原点旋转：transform:rotate(num-deg);
分别以x轴和y轴旋转：transform:rotate(num-deg,num-deg);
x轴倾斜：transform:rotate(num-deg);
y轴倾斜：transform:rotate(num-deg);

* deg：角度；num-deg：如45deg是45度。

3、缩放

默认四周缩放：transform:scale(num);
以x轴为准，左右缩放：transform:scalex(num);
以y轴为准，上下缩放：transform:scaley(num);

*缩放的单位是倍数，如transform:scale(1.5);表示1.5倍。

4、倾斜

默认以原点倾斜：transform:skew(num-deg);
分别以x轴和y轴倾斜：transform:skew(num-deg,num-deg);
x轴倾斜：transform:skewx(num-deg);
y轴倾斜：transform:skewy(num-deg);

* 倾斜也是以角度deg为单位。

<!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>Document</title>
</head>