Css3文本新属性

  • 新增颜色模式
    rgba(r,g,b,a)
r red 0~255
g green 0~255
b blue 0~255
a alpha 0~1

实例:背景透明,文字不透明

  • 文字阴影
    text-shadow: x y blur color
    文本阴影如果加多层,层之间用逗号分隔,会很卡。通过文字阴影可以做出很多文字特效,如浮雕、光晕。
    文字模糊效果:
h1{font: 100px/200px "微软雅黑"; text-align: center;color: #000; text-shadow:0 0 0 rgba(0,0,0,1); border: 1px solid #000}
h1:hover {color: rgba(0,0,0,0); text-shadow: 0 0 30px rgba(0,0,0,0.5)}
  • 文字边框
    -webkit-text-stroke:宽度 颜色
    但只有webkit的浏览器支持。

  • 文字排版
    (1) direction 定义文字排列方式(全兼容)
    rtl 从右到左排列
    ltr 从左到右排列
    注意配合unicode-bidi一起使用
    (2) text-overflow定义省略文本的处理方式
    clip 无省略号
    ellipsis 省略号 注意配合overflow:hidden和white-space:nowrap一起使用

  • 自定义字体

@font-face {
    font-family: 'chm';
    src:url('111-webfont.eot');
    src:url('111-webfont.eot?#iefix') format('embedded-opentype'),
        url('111-webfont.woff') format('woff'),
        url('111-webfont.ttf') format('truetype'),
        url('111-webfont.svg#untitledregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

转换字体格式生成兼容代码
http://www.fontsquirrel.com/fontface/generator

你可能感兴趣的:(css)