css文字特效(使用css设置文字效果)

  在前端开发中,对于文字的效果一般都是只用来展示信息,也不会做特殊处理,而有的时候我们需要一些看起来有特效的文字,那么就需要用图片或者背景图来代替了,而使用css代码同样也能做出一些有特效的文字,具体来看一下:

image.png

  1、css文本属性之文本中大小写字母转换—text-transform

  属性值:

  uppercase;(全部大写)

  lowercase;(全部小写)

  capitalize;(在所有小写单词中,首字母大写)

  p{text-transform:uppercase;}

  2、css文本属性之文本居中——text-align

  属性值:

  center;(居中)

  left;(左边对齐)

  right(右边对齐)

  p{text-align:center;}

  3、css文本属性之段落缩进—–text-indent

  em(是以字为单位),±都可以

  p{text-indent:3em;}

  4.css文本属性之设置文字装饰效果——text-decoration

  属性值:

  none(去掉下划线)

  underline(加下划线)

  overline(加上划线)

  line-through(加删除线)

  a{text-decoration:none;}

  5.css文本属性之设置段落行高—-line-height

  属性值:百分比,px,数字

  a{line-height:13px;}

  6.css文本属性之设置字词间距

  word-spacing(只对英文有用)

  letter-spacing(汉字和英文都可以)

  p{letter-spacing:16px;}

  7.css文本属性之段落间距-margin

  p{margin:66px;}

  8.css文本属性之边框——border

  属性值有三个:大小,颜色,样式;

  边框样式有:solid(实线),dashed(虚线),dotted(点线)

  p{border:3pxlightgreensolid;}


发表评论

评论列表

还没有评论,快来说点什么吧~