• web前端CSS3学习2017.6.29


    css3属性

    一 颜色表示法
    英文单词
    十六进制
    rgb(10,25,30)
    第一个值表示的是红色占比
    第二个值表示的是绿色占比
    第三个值表示的是蓝色占比
    占比取0-255

    透明度
    rgba(红色,绿色,蓝色,透明度)---(ie9)
    透明度的取值:0---1,如果值越大,透明度越低

    opacity:0.5---(ie9)
    后面跟一个0---1的值,如果值越大,透明度越低
    opacity对整个元素的所有内容都会透明,而rgba只是设置元素的颜色透明

    filter:alpha(opacity=50);---滤镜(支持ie8及更早版本),取值为(0---100)%,如果值越大,透明度越低
    opacity:0.5;

    二 设置圆角边框---(ie9)
    -webkit-/-moz-
    border-radius:5px/5%;
    border-top-left-radius:150px;
    border-bottom-right-radius:150px;

    缩写:
    border-radius: 左上 右上 右下 左下;
    border-radius: (左上/右下) (右上/左下);
    border-radius: (左上) (右上/左下) (右下);

    ----前缀----
    为什么会产生前缀:在标准为确定时,部分浏览器已经根据最初草案实现了部分功能,为了与之后确定下来的标准进行兼容
    加了前缀的作用:可以兼容到浏览器更早的版本
    -webkit- chrome
    -moz- firfox
    -o- opara
    -ms- IE

    三 设置盒阴影---ie9
    -webkit-/-moz-/-o-
    box-shadow: 水平偏移量 垂直偏移量 模糊距离 阴影尺寸 颜色 inset/outset;

    四 过渡效果---ie10
    -webkit-/-moz-/-o-
    transition:参与属性 过渡时间 动画类型 延迟时间;
    当参与的css属性发生变化时,才能产生过渡效果
    动画类型:
    默认,ease---以慢速开始,然后变快,最后以慢速结束
    linear---从始至终都是相同的速度
    五 2D转换---ie9
    -webkit-/-moz-/-o-/-ms-
    transform:
    translate(x,y) 沿着X和Y轴移动,在初始位置的左上角开始偏移
    translateX(n)/translateY(n)
    scale(width,height) 改变元素的宽度和高度
    scale(n) 宽度和高度都是以n的倍数进行放大或缩小
    scaleX(n)/scaleY(n),以中心点为坐标进行放大或缩小
    rotate(deg) 规定元素旋转多少度,以顺时针的方向旋转
    skew(x-deg,y-deg) 沿着x和y轴倾斜
    transform-origin:设置中心坐标
    center center;(默认值)
    left/right top/bottom;
    具体值/百分比;
    六 transparent====》rgba(0,0,0,0)全透明黑色速记法
    background-color---ie5
    border-color----ie7
    color----ie9

    七 设置背景图大小---(ie9)
    background-size:
    500px;等比例缩放
    500px 300px;
    cover;将背景图等比例缩放到完全覆盖容器,背景图有可能会超出容器
    contain;将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等,背景图始终被包含在容器内

    八 设置背景图的定位区域---(ie9)
    background-origin:
    padding-box;从padding区域(包含padding)开始显示背景图像
    border-box;从border区域开始显示背景图像
    content-box;从内容区域显示背景图
    九 设置文本阴影--(ie10)
    text-shadow:水平偏移量 垂直偏移量 模糊距离 阴影颜色;

    十 溢出文本处理
    text-overflow:
    clip;不显示省略标记,而是简单的裁切
    ellipsis;当文本超出时以省略号的方式显示,省略号插入的位置是在最后一个字符
    ellipsis-word;省略号插入的位置是最后一个词
    white-space:
    nowrap;表示强制在同一行显示
    pre;表示显示语文本格式
    让文本显示在一行,超出部分显示省略号
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    十一 动画(@keyframes规则)---ie10
    -webkit-
    animation:@keyframes名字 花费时间 速度曲线 延迟时间 播放次数 是否轮流反向
    速度曲线:
    linear,匀速播放
    ease,默认。先慢再快后慢的播放
    播放次数:
    n,代表播放n次
    infinite,无限循环
    轮流反向:
    normal,默认
    alternate,轮流方向播放

  • 相关阅读:
    一题多解 —— 同时找到序列的最大值最小值
    中位数与顺序统计量
    软件开发 —— 极限编程(XP:Extreme Programming)
    一题多解 —— 二项式分布的期望和方差的计算
    C++中explicit关键字用法
    【联系】二项分布的对数似然函数与交叉熵(cross entropy)损失函数
    随机变量统计独立性的相关证明
    PowerShell管理SCOM_批量设置维护模式(下)
    导出AD用户所属组,查询AD用户(aduser)
    SQL脚本运行
  • 原文地址:https://www.cnblogs.com/jiandandeboke/p/7124554.html
Copyright © 2020-2023  润新知