首页 > Web开发 > 详细

CSS3相关实用知识点

时间:2018-01-19 21:57:55      阅读:235      评论:0      收藏:0      [点我收藏+]

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

CSS3相关实用知识点目录

边框设置
颜色设置
背景设置
渐变使用
超出文本设置
阴影设置
CSS3变换设置
过渡设置
动画设置
多列布局
BoxSizing设置
弹性布局
滤镜函数
媒体查询
resize元素
outline偏移
其他的@规则使用


  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; 指定设备

CSS3相关实用知识点

原文:https://www.cnblogs.com/ye-hcj/p/8318814.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!