CSS3

三、  CSS3

 

1.  圆角

1.1  border-radius: 半径

1.2  border-radius: 0px 10px 0px 10px; 左上角，右上角，右下角，左下角

1.3  border-radius: %; 通常用来设置一个椭圆，50% 为一个圆

1.4  举例代码

       div{
            width: 40px; height: 40px;
            border-radius: 20px;
            background-color: deepskyblue;
            margin: 0 auto;
        }
        <div></div>

 

2.  添加阴影

2.1  box-shadow: 10px 20px 5px blue; 水平阴影位置，垂直阴影位置，模糊距离，颜色

 

3.  文本阴影

3.1  text-shadow: 10px 20px 5px blue; 水平阴影位置，垂直阴影位置，模糊度，颜色

3.2  举例代码

       p{
            color: black;
            text-shadow: 1px 1px 6px red;
            box-shadow: 6px 6px 40px black;
        }
        <p>今天天气真好,很适合学习！</p>

 

4.  添加字体

4.1  在项目中新建文件夹，用来放你下载好的字体资源

4.2  关键字与使用

       @font-face{
                  font-family: myFont; //你自定义的字体
                  src: url("res/ add.ttf"); //字体存放路径
       }
       p{font-family: myFont; font-size: 18px; }//使用<p></p>

 

5.  transition 过渡

5.1  transition 允许 CSS 的属性在一定的时间内平滑的过渡

5.2  transition: left  .3s ease-in-out  .1s；属性名 持续时间 速度曲线 何时开始

5.3  速度曲线的属性

5.3.1  linear:以相同的速度过渡;

5.3.2  ease-in:慢速开始的过渡,等于 cubic-bezier(0.42, 0 , 1, 1)

5.3.3  ease:慢-快-慢

5.4  举例代码

       div{
            width: 200px; height: 300px;
            background-color: greenyellow;
            position: relative;
            margin-top: 20px;
            padding: 0px;
            overflow: hidden;
        }
        p{
            height: 100px;
            width: 200px;
            position: absolute;
            bottom: -100px;
            background-color: red;
            transition: .5s;
            margin: 0px;
            padding: 0px;
        }
        div:hover p{
            bottom: 0px;
        }
        <div>
           <p></p>
        </div>

 

6.  transform 转换

6.1  transform 属性是通过函数来定义的

6.2  2D 常用属性

6.2.1  transform: rotate（20deg）;元素顺时针旋转20角度，允许负值（进行逆时针旋转角度）

6.2.2  transform: translateX(20px); 元素沿X轴移动20px

6.2.3  transform: translateY(20px); 元素沿Y轴移动20px

6.3  3D 常用属性

6.3.1  transform: rotateX(); 元素围绕 x 轴以给定度数翻转

6.3.2  transform: rotateY(); 元素围绕 y 轴以给定度数翻转

6.3.3  transform: translate3d(x, y, z); 此函数规定指定元素在三维空间中的位移

6.3.4  transform: translateZ(-1px) scale(-1, 1); translateZ(-1px)改变层次，scale(x, y)负值可以达到镜像

6.3.5  transform-origin: left/right/center/top/bottom; 元素以…为原点翻转

6.3.6  transform-style: preserve-3d; 开启 3D 样式

6.3.7  perspective: 6000px;  3D 景深

 

7.  animation 动画

7.1  animation 至少包含前两个属性值：动画的名称 动画的时长

7.2  关键字与使用

            @keyframes + 动画名{
                    from{}to{}
                    或
                    百分比{}
            }
            animation: 2s linear infinite Cd; 时长 效果 开始时间 动画名

7.3  举例代码

<style>
        div{
            width:100px; height: 100px;
            background: url("img/cd.png") no-repeat;
            background-size: 100px 100px;
            border-radius: 50%;
        }
        @keyframes CdTurn{
            from{transform: rotate(0deg);}
            to{transform: rotate(360deg);}
        }
        div:hover{
            animation: 2s linear infinite CdTurn;
        }
</style>
<div></div>

 

8.  column 多列相关属性

8.1  column-gap: 50px; 列之间的距离

8.2  column-rule: 1px solid red; 列之间的宽度，样式，颜色

 

9.  Media Query 媒体查询

9.1  响应式设计的核心 CSS 技术

9.2  CSS2 的媒体查询

9.2.1  表示当页页宽度为 600-900 之间，调用 small.css 样式

          <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="small.css" type="text/css" />

9.3  CSS3 的媒体查询

          <style>
             @media screen and (max-width: 600px){
                        body{background-color: red;}
             }
          </style>

9.4  关键字

9.4.1  @media 注解

9.4.2  screen 媒体类型，还有 all、print 等

9.4.3  and 连接词

9.4.4  （max-width:600px） 媒体特性

¨ 判断输出设备是否满足里面的逻辑表达式

¨ 括号内只接受0个或1个的逻辑表达式，但可以用 and 连接多个媒体特征

¨ 大部分属性接受 min/max 前缀，如 max-device-height ...

9.5  参考资料  https://www.cnblogs.com/moqiutao/p/4753839.html