zoukankan      html  css  js  c++  java
  • CSS3学习笔记

    用的时候首先记得加前缀:-webkit-,-moz-,-o-,-ms-,因为目前各个浏览器对CSS3和HTML5的兼容性还是参差不齐。

    边框:
    1.border-radius(实心圆的实现)
    2.box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式](用逗号可叠加效果)
    3.border-image:url(border.png) 70 70 70 70 round /repeat/stretch(由外到内切片的偏移量,分别为上右下左)

    颜色:
    1.RGBA(多了一个透明度)
    2.颜色渐变:linear/radial gradient(to left,#fff,blue,red)

    文字和字体:
    1.text-overflow:clip(剪切) | ellipsis(显示省略)/*要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果*/
    2.word-wrap:normal(控制连续文本换行) | break-word(内容在边界内换行)
    3.@font-face{  font-family:字体名称;src:字体文件在服务器的路径;}
    4.text-shadow:X-Offset Y-Offset blur color;

    背景:
    1.background-origin: border-box | padding-box | content-box;/*设置元素背景图片的原始起始位置,如果背景不是no-repeat,这个属性无效*/
    2.background-clip: border-box | padding-box | content-box | no-clip;
    3.background-size: auto | <长度值> | <百分比> | cover(填满整个容器) | contain(某一边紧贴容器边缘)/*设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。*/
    4.多背景图

    选择器:
    1.新增属性选择器a[href^=val](开头) | a[href$=val](结尾) | a[href*=val](包含)
    2./:root/:not/:empty/:target(用来匹配指向链接的样式)
    3.first-child(匹配第一个子元素)/last-child/nth-child(数字)/nth-last-child/(类型)first-of-type/nth-of-type(2n)/:only-child(来控制仅有一个子元素的样式)/only-of-type
    4.:enabled/:checked/::selection选择器(鼠标选择时)/:read-only/:read-write/::before和::after(用来给清除浮动,添加阴影等)

    变形:
    1.rotate(..deg)(旋转)
    2.skew(x y)(扭曲)
    3.scale(x,y)(缩放)
    4.translate(x,y)(位移,可以应用在居中上)
    5.matrix()(矩阵,用于2D变换)
    6.transition-duration(过渡所需时间)
    7.transition-timing-function(linear/ease-in-out/ease-out/ease-in)(随着时间而过渡的快慢)
    8.transition-delay(用来指定当改变元素属性值后多长时间开始执行)

    动画:
    1.Keyframes(类似于Flash中的关键帧)(格式:百分比{样式})
    2.animation-name(调用Keyframes定义好的动画)
    3.animation-duration(用来设置CSS3动画播放时间)
    4.animation-timing-function(主要用来设置动画播放方式)
    5.animation-delay
    6.animation-iteration-count(infinite | <number>)
    7.animation-direction(normal、alternate)
    8.animation-play-state(running和paused)
    9.animation-fill-mode(none、forwards、backwords和both)定义在动画开始之前和结束之后发生的操作

    布局:
    1.columns:列宽 || 列数 / columns-width(auto/列宽) / column-count(auto/列数)
    2.column-gap(列间距)
    3.column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>(列表边框)
    4.column-span(跨列设置)
    5.弹性盒子模型
    6.伸缩布局

  • 相关阅读:
    WinAPI: midiOutReset 重置输出设备
    WinAPI: midiOutLongMsg 向输出设备发送一条系统专用的 MIDI 消息
    WinAPI: midiInStart 启动输入
    WinAPI: midiOutClose 关闭输出设备
    WinAPI: midiInStop 停止输入
    bootstrap居中
    设计模式之访问者模式
    zend framework 开发环境搭建及入门
    转:GIT GUI使用
    Asp web.config详解
  • 原文地址:https://www.cnblogs.com/shenyu1995/p/4813255.html
Copyright © 2011-2022 走看看