zoukankan      html  css  js  c++  java
  • css3字体

    1.定义个性化字体

    @font-face{

    font-family:字体名字;

    src:字体地址,可以多写几个用逗号隔开兼容浏览器

    }

    div{

    font-family:字体名字/*使用字体*/

    }

    2.使用反射让字体倒影

    box-reflect:{方向,间距,渐变效果}

    注:padding会yingxiang倒影之间的间距

    渐变效果

    none(无)

    url:指定遮罩图像

    linear-gradient(参数):线性渐变

    redial-gradient(参数):镜像渐变

    repeating-linear-gradient(参数):使用重复线性渐变创建遮罩图像

     repeating-redial-gradient(参数):使用重复镜像渐变创建遮罩图像

    例子;

    box-reflect:blow 1px linear-gradient(transparent,transparent50%,ragba(0,0,0,.3));

    字体阴影

    text-shadow:水平偏移量,垂直偏移量,模糊程度,颜色

    字体描边

    text-stroke:宽度 颜色;(目前只有webkit内核支持该属性)

    实际开发中利用字体阴影制作这一效果

    例子

    text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;等同于 text-stroke:1px #000;

    ie6-9可以使用特有的滤镜效果来实现

    字体分栏效果

    column-count:栏数

    column-gap:每一列之间的宽度

    column-rule:定义分栏中间的样式

    column-rule:样式宽度 样式类型 样式颜色

    火狐要加前缀-moz-

    chrome 苹果加-webkit

     超出部分省略号

    white-space:nowrap;/*定义文本不换行*/

    text-overflow:ellipsis;/*省略号*/-o-text-overflow:ellipsis;兼容Opera浏览器

    overflow:hidden;/*超出部分隐藏*/

  • 相关阅读:
    关于swift 单元测试的补充
    架构设计案例分析-高速公路收费运营管理平台
    可以落地的软件架构
    循序渐进地培养面向对象的思维方式
    动态规划初学
    求解惑
    github eclipse项目
    关于x86 i586之类
    Manifest intent filter翻译
    消息处理机制小结
  • 原文地址:https://www.cnblogs.com/dangou/p/5184643.html
Copyright © 2011-2022 走看看