• 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,轮流方向播放

  • 相关阅读:
    LeetCode题解之Flipping an Image
    LeetCode 之Find Minimum in Rotated Sorted Array
    LeetCode题解Transpose Matrix
    LeetCode 题解之Minimum Index Sum of Two Lists
    LeetCode题解之Intersection of Two Linked Lists
    LeetCode 题解之Add Two Numbers II
    LeetCode题解之Add two numbers
    href="#"与href="javascript:void(0)"的区别
    有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除
    ie7下属性书写不规范造成的easyui 弹窗布局紊乱
  • 原文地址:https://www.cnblogs.com/jiandandeboke/p/7124554.html
Copyright © 2020-2023  润新知