第十一篇 CSS-08

2017-05-19  本文已影响0人  ss555566
  1. 五大主流浏览器内核
    a) IE：Trident -ms-
    b) 谷歌：Webkit -webkit-
    c) 火狐：Gecko -moz-
    d) 苹果：Webkit -webkit-
    e) 欧朋：Presto -o-
  2. border-radius：设置圆角边框，各浏览器对此属性兼容较好，所以在使用时不需要加前缀，但是注意IE的低版本不支持该属性。格式如下
    a) 左上角:border-top-left-radius
    b) 右上角:border-top-right-radius
    c) 左下角:border-bottom-left-radius
    d) 右下角:border-bottom-right-radius
    e) border-radius:值（四个角相同）
    f) border-radius:值1（左上、右下）值2（右上、左下）
    g) border-radius:值1（左上）值2（右上、左下）值3（右下）
    h) border-radius:值1（左上）值2（右上）值3（右下）值4（左下）
  3. box-shadow：设置元素（盒子）的阴影，格式：box-shadow：水平位移值垂直位移值阴影半径阴影外扩阴影颜色，注意阴影外扩属性值常被省略，即经常使用四个值，另外一个盒子可以设置多个阴影效果，效果间用逗号分隔，此时需要注意后面的阴影半径要大于前面阴影半径，否则会被覆盖，在使用该属性时可以加前缀
  4. border-image：设置元素边框为图像，包含如下单一属性
    a) border-image-source：设置图像地址，格式border-image-source:url(路径);
    b) border-image-slice：设置图像划分方式（采用九宫格的划分方法，九宫格里面的四个角保持原状，分别位于元素的四个角上，角和角间的区域默认会拉伸，九宫格最中间的格子默认透明，可以使用fill来显示出来），主意该属性的属性值没有单位，只写具体的数值，可以通过值的个数表示四个边
    border-image-slice：值（上下左右相同）
    border-image-slice：值1（上下）值2 （左右）
    border-image-slice：值1（上）值2（左右）值3（下）
    border-image-slice：值1（上）值2（右）值3（下）值4（左）
    border-image-width：设置图像的边框宽度，如果不设置，边框宽度和border-width的宽度相同，在火狐里面为0，在谷歌里面为3，可以将该属性的值设置成和slice的值相同
    c) border-image-outset：设置边框图像外扩，默认边框图像在元素的上方显示，就覆盖在元素上面，但是不占位，可以利用该属性调节边框位置，属性值的写法可以和slice相同
    d) border-image-repeat：设置边框图像平铺方式，默认为拉伸即stretch、repeat（可能出现不完整的图像）、round（平铺，不会出现不完整图像）
    e) border-image复合属性：url slice/width/outset repeat
  5. background-image：设置多背景图，设置的格式为background-image:url(),url();注意，默认背景图都是平铺的，另外多个背景图会出现层叠关系，可以使用background的其它属性进行设置
  6. background-size：设置背景图尺寸，属性值为像素值、百分比、contain、cover，如果使用像素值或百分比，格式为background-size:宽度高度；注意如果只写一个值表示宽度，另一个值浏览器自动处理，即auto
    a) contain：将背景图扩大，当有一个边达到元素边界时即停止扩大，可能出现背景图无法铺满整个元素的问题
    b) cover：将背景图扩大，直达整个元素被铺满位置，会出现背景图超过元素的问题
  7. background-origin：设置背景图起始位置，属性值border-box/padding-box/content-box，测试时如果要看到效果，最好将边框类型设置为虚线
    a) border-box:从边框下面开始
    b) padding-box：从内边距下面开始，默认
    c) content-box：从内容下面开始
  8. background-clip:剪切背景图，属性值border-box/padding-box/content-box
    a) border-box:将边框以外的编辑剪切掉，在浏览器看不出效果，因为元素边框外面根本就不显示背景
    b) padding-box：只保留从padding下面开始的背景，padding外面的背景被剪切掉
    c) content-box：只保留从内容下面开始的背景，content外面的背景被剪切掉
  9. 线性渐变background：linear-gradient（to方向，颜色1，颜色2），注意颜色至少两个
  10. 径向渐变background：radial-gradient（at位置，颜色1，颜色2），注意颜色至少两个，另外这两种渐变如果要加前缀，需要将前缀加载属性值前面，因为background不是新增属性但是，值是新增的
  11. opacity：设置元素透明度，属性值为0-1,0表示完全透明，1表示不透明，注意他和rgba的区别，opacity的样式可以被子元素继承，但是rgba不可以继承
  12. 服务器端提供字体类型，格式
    第一步：设置类型
    @font-face{
    font-family: 名称；
    src: url(字体路径);
    }
    第二步：应用类型
    div{
    font-family: 上面定义的字体名称
    }
  13. transform：设置元素变形效果，需要结合相应函数使用，可以有如下函数
    a) 移动：translate()
    transform:translateX()
    transform:translateY()
    transform:translate(值1，值2)，如果只写一个值表示x方向
    b) 缩放：scale()
    transform:scale(倍数1, 倍数2),默认值为1，大于1放大，小于1缩小，如果写一个值表示宽高同时缩放相同的尺寸
    transform:scaleX
    transform:scaleY
    c) 旋转：rotate()
    d) transform：rotate(度数)，默认向右旋转，如果写负值表示向左旋转
    e) 拉伸(倾斜)：skew()
    transform:skewX()
    transform:skewY()
    transform:skew(值1，值2)
  14. transition
  15. animation
    transform:可以是HTML元素产生移动、缩放、旋转、变形等效果，该属性需要结合相应函数使用
    移动：
    沿X轴移动：transform:translateX(距离);
    沿Y轴移动：transform：translateY(距离)；
    沿X和Y轴同时移动transform:translate(距离)；注意如果在括号中只写一个值，表示沿X轴移动，如果写两个值，表示沿X轴和Y轴同时移动
    沿X轴和Y轴同时移动：transform：translateX(距离) translateY(距离);
    缩放：
    沿X轴缩放：transform:scaleX(倍数);倍数的默认值为1，如果大于1表示放大，如果小于1表示缩小
    沿Y轴缩放：transform：scaleY(倍数);
    transform:scale(倍数)
    旋转：
    transform:rotate(度数);
    倾斜
    沿X轴和Y轴同时倾斜：transform:skew(度数);如果写一个值表示沿X轴倾斜，如果写两个值表示沿X轴和Y轴同时倾斜
    沿X轴倾斜：transform:skewX(度数)
    沿Y轴倾斜：transform：skewY(度数)
    transform:rotate3D(x,y,z,度数)，如果沿X轴旋转，x值为1，y值和z值为0，如果沿y轴旋转，x和z的值为0，y为1
    transform:rotateX(度数)
    transform:rotateY(度数)
    transform:rotateZ(度数)
    transform：translateX（）
    transform:translateY（）
    transform:translateZ（）
    注意：3D平移时如果要看到效果，需要在父元素上perspective属性，该属性可以产生一个3D视觉效果，可以将该属性的属性值设置为像素值，如1000px,需要注意设置的位置为父元素
    transform-origin：设置元素必须时的参考点，属性值可以是像素值、百分比、关键字
    关键字：
    水平：left center right
    垂直：top center right
    transition：过渡
    transition-property：设置过渡过程中，哪些CSS属性可以被改变，值可以是all/nonoe/自己指定的CSS属性
    transition-duration：设置过渡效果所需时间，属性值为秒或者是毫秒，默认值0
    transition-timing-function：设置过渡状态，属性值
    ease：慢-快-慢
    linear：匀速
    ease-in：慢-快
    ease-out:快-慢
    ease-in-out：慢-快-慢
    transition-delay：延迟执行时间，属性值为秒或毫秒
    定义动画
    @keyframes
    动画名称{
    from{
    动画开始时的样式
    }
    to{
    动画结束时的样式
    }
    }
    @keyframes
    动画名称{
    0%{
    开始时的样式
    }
    x%{
    中间部分的样式
    }
    100%{
    结束时的样式
    }
    }
    动画应用
    animation
    animation-name：设置动画名称
    animation-duration：设置动画完成所需时间，属性值为秒或毫秒，默认为0
    animation-timing-function：设置动画完成时的状态，属性值有ease/linear/ease-in/ease-out/ease-in-out
    animation-delay：设置动画延迟执行时间，属性值为秒或毫秒
    animation-iteration-count：设置动画执行次数，默认为1次，属性值可以设置成多次，也可以设置成infinite（无限次）
    animation-direction：normal（正常）、alternate（反转）
上一篇下一篇

猜你喜欢

热点阅读