CSS3新特性详解

本文讲解CSS3相关实用知识点

CSS3相关实用知识点目录

边框设置

颜色设置

背景设置

渐变使用

超出文本设置

阴影设置

CSS3变换设置

过渡设置

动画设置

多列布局

BoxSizing设置

弹性布局

滤镜函数

媒体查询

resize元素

outline偏移

其他的@规则使用

calc

---

1. 边框

   边框圆角 border-radius: 10px;
   边框图片设置
       border: 20px solid transparent;
       border-image: url(./2.jpg) 7 31 round;
   

2. 颜色设置

   rgb（红，绿，蓝）
       background: rgb(0, 0, 112)
       background: rgba(0%, 0%, 11%, 0.8)
   hsl（色值，饱和度，亮度）
       background:hsl(332, 50%, 50%);
       background:hsla(332, 50%, 50%, 0.5);
   

3. 背景设置

   背景大小
       background-size: 10%;
       background-size: 100px;
       background-size: cover; 背景覆盖，只要覆盖住元素就可以
       background-size: contain; 背景填充，压缩或者拉伸图片以填充满元素
   背景裁剪
       background-clip: content-box; 按内容裁剪
       background-clip: padding-box; 按padding裁剪
       background-clip: border-box; 按border裁剪
   背景位置
       background-origin: content-box; 从内容开始
       background-origin: padding-box; 从padding开始
       background-origin: border-box; 从border开始
   多重背景
       background: url("./1.jpg") no-repeat center,  url("./2.jpg")  no-repeat center, lightblue;
       写在前面的背景在最上面，背景颜色只能写在最后面
   

4. 渐变使用

   线性渐变
       从上到下 background: linear-gradient(red, yellow);
       从左到右 background: linear-gradient(to right, red, yellow);
       从左下到右上 background: linear-gradient(to top right, red, yellow);
       使用角度，0deg表示bottom to top，方向是顺时针旋转
           background: linear-gradient(30deg, red, yellow);
       多颜色渐变 background: linear-gradient(red, yellow, lime);
       指定颜色停止点
           background: linear-gradient(red , yellow 30%, lime 90%);
           也就是说，在30%的位置必须是yellow，在90%的位置必须是lime，除了可以指定百分比外还可以指定px
           background: linear-gradient(red , yellow 30%, lime 120%); 还可以超出范围
       渐变重复
           background: repeating-linear-gradient(darkmagenta,green 10%, darkmagenta 20%)
       背景图渐变色
           background: linear-gradient(to right, rgba(228, 108, 10, 0.1), rgb(10, 182, 1)), url("./1.jpg");
   径向渐变
       基本语法 radial-gradient(shape size at position, color-stop1, color-stop2, ...);
           其中 shape 设置渐变结束的形状 circle ellipse
           其中 size 设置渐变大小 farthest-corner closest-corner farthest-side closest-side
           其中 position 设置渐变的位置 top left ...
       从里到外 background: radial-gradient(red, yellow, lime);
       从左下到右上 background: radial-gradient(circle farthest-corner at left bottom, red, yellow, lime);
       渐变重复
           background: repeating-radial-gradient(yellow, white 10%, lime 20%);
   

5. 超出文本设置

   超出文本显示省略号
       p {
           width: 400px;
           overflow: hidden;
           white-space: nowrap;
           background: #cdcdcd;
           text-overflow: ellipsis;
       }
   超出文本直接截取
       p {
           width: 400px;
           overflow: hidden;
           white-space: nowrap;
           background: #cdcdcd;
           text-overflow: clip;
       }
   文本自动换行
       p {
           width: 400px;
           background: #cdcdcd;
           word-wrap: break-word;
           ---也可以设置如下---
           word-break: break-all; keep-all
       }
   

6. 阴影设置

   盒子阴影
       基本语法
           box-shadow: x偏移量 y偏移量 阴影模糊量 颜色;
       box-shadow: 5px 5px 10px #ccc;
       box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
   文本阴影
       text-shadow: 5px 5px 10px #666;
       text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
   

7. CSS3变换设置

   2D变换
       元素位移 transform: translate(200px, 100px);
       元素旋转 transform: rotate(30deg); 默认顺时针方向
       元素缩放 transform: scale(1.5, 0.8);transform: scale(1.5)
       元素扭曲 transform: skew(-40deg, 15deg);
       简写 transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);
   3D变换
       body{
           perspective: 500px;
       }
       元素位移 transform: translate3d(20px, 30px, 50px);
       元素旋转 transform: rotate3d(0, 1, 0, 60deg); 沿着y轴旋转
       元素缩放 transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg);
   

8. 过渡设置

   单个属性动画使用
       div{
           width: 100px;
           height: 100px;
           background-color: black;
           transition-property: background-color;
           transition-duration: 1s;
       }
       div:hover{
           background-color: aqua;
       }
   多个属性动画使用
       div{
           width: 100px;
           height: 100px;
           background-color: black;
           transition-property: background-color, width;
           transition-duration: 1s, 2s;
       }
       div:hover{
           background-color: aqua;
           width: 200px;
       }
   过渡简写
       顺序 transition-property, transition-duration, transition-timing-function, and transition-delay
       transition: background-color 1s ease-in 0s;
   

9. 动画设置

   animation具有比transition更强的控制动画的能力
   基本使用
       div{
           width: 100px;
           height: 100px;
           background-color: black;
           position: relative;
           animation-name: movebox;
           animation-duration: 2s;
       }
       @keyframes movebox {
           from {
               left: 0;
           }
           to {
               left: 200px;
           }
       }
   keyframes的定义
       @keyframes movebox {
           12.5% {left: -50px;}
           25% {left: 50px;}
           37.5% {left: -25px;}
           50% {left: 25px;}
           62.5% {left: -10px;}
           75% {left: 10px;}
           87.5% {left: -5px;}
           90% {left: 5px;}
           92.5% {left: -3px;}
           95% {left: 3px;}
           97.5% {left: -1px;}
           100% {left: 1px;}
       }
   动画简写
       顺序从上到下
           animation-name, 动画名称
           animation-duration, 动画持续时间
           animation-timing-function, 动画执行函数
           animation-delay, 动画延迟时间
           animation-iteration-count 动画重复次数
           animation-direction 动画在重复播放时是否反序播放，主要和animation-iteration-count配合使用
           animation-fill-mode 指定动画结束后，元素在哪个地方，backwards, forwards
           animation-play-state 指定动画暂停和结束，paused, running
       如 animation: movebox 2s linear 0s 1 alternate backwards running;
   

10. 多列布局

    如果你想布局多列，使用多列布局简直就是神器
    基本使用
        <div class="box">
            <div class="box1">1</div>
            <div class="box2">2</div>
        </div>
        .box {
            width: 500px;
            column-count: 3;
            background-color: gainsboro;
        }
        .box1 {
            background-color: aqua;
        }
        .box2 {
            background-color: bisque;
        }
    设置列宽
        column-width: 200px;
        column-width和column-count不能一起使用，因为他们两个作用是一样的，都是来指定显示多少列
    设置列与列之间的间隔
        默认间隔是1em
        column-gap: 0px;
    设置列与列之间的间隔线
        column-rule: 2px solid red;
    

11. BoxSizing设置

    默认设置width,height是以盒子的内容计算的，可以设置box-siziing改变这一行为
    box-sizing: border-box;
    

12. 弹性布局 请访问 css3弹性布局

13. 滤镜函数

    .box {
        width: 500px;
        height: 500px;
        background-color: red;
        filter: blur(5px); 设置模糊程度
        filter: contrast(50%); 设置亮度
        filter: drop-shadow(4px 4px 10px orange); 设置阴影，和box-shadow类似
        filter: grayscale(50%); 设置灰度
        filter: hue-rotate(480deg); 设置颜色旋转角度
        filter: invert(100%); 设置颜色反转
        filter: opacity(20%); 设置背景透明
        filter: sepia(62%); 设置复古
        filter: saturate(20%); 设置饱和度
    }
    和写顺序 filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate()
    

14. 媒体查询

    媒体查询是做响应式布局必备知识
    @media screen and (max-width: 767px) { } 手机
    @media screen and (min-width: 768px) and (max-width: 1023px) { } ipad
    @media screen and (min-width: 1024px) { } 小电脑
    @media screen and (min-width: 1280px) { } 中电脑
    ...
    

15. resize元素

    .box {
        width: 300px;
        min-height: 100px;
        overflow: auto;
        border: 1px solid black;
        resize: horizontal; 水平可拖动
        resize: both; 随意拖动
        resize: none; 清楚拖动
    }
    

16. outline偏移

    .box {
        width: 300px;
        height: 300px;
        border: 1px solid #ccc;
        outline: 2px solid red;
        outline-offset: 10px; 外移
        outline-offset: -10px; 内移
    }
    

17. 其他的@规则使用

    设置css编码
        @charset "UTF-8"; 设置在外部样式表文件的头部
    设置自定义字体
        @font-face {
            font-family: "OpenSansBold";
            src: url("../fonts/OpenSans-Bold.eot");
            src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
        }
        然后可以这样使用
        div{
            font-family: "OpenSansBold";
        }
    导入css文件
        @import url("css/layout.css");
        @import url("css/print-style.css") print; 指定设备
    

18. calc

    calc用来计算元素的大小和位置
    .center{
        position: absolute;
        background: red;
        height: 200px;
        width: 200px;
        top: calc(50% - 200px / 2);
        left: calc(50% - 200px / 2);
    }
    
    <div class="center"></div>