css3字体

Posted 2020-06-13

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;/*超出部分隐藏*/