CSS新手入门笔记整理:CSS3文本样式

文本阴影:text-shadow

语法

复制代码
p{text-shadow:x-offset="数值" y-offset="数值" blur="数值" color="色值";}

x-offset是"水平阴影",表示阴影的水平偏移距离,单位可以是px、em和百分比等。

y-offset是"垂直阴影",表示阴影的垂直偏移距离,单位可以是px、em和百分比等。

blur是"模糊距离",表示阴影的模糊程度,单位可以是px、em和百分比等。blur值越大,阴影越模糊;blur值越小,阴影越清晰。blur不能为负值。如果不需要阴影模糊效果,可以把blur值设置为0。

color是"阴影颜色",表示阴影的颜色。

定义多个阴影

可以使用text-shadow属性为文本定义多个阴影,并且针对每个阴影使用不同的颜色。当定义多个阴影时,text-shadow属性是一个以英文逗号隔开的值列表。

语法

复制代码
p{
  text-shadow:-1px 0 0 #333,  /*向左阴影*/
  0 -1px 0 #333, /*向上阴影*/
  1px 0 0 white, /*向右阴影*/
  0 1px 0 white; /*向下阴影*/
  }

文本描边:text-stroke

text-stroke是一个复合属性,它是由text-stroke-width和text-stroke-color两个子属性组成的。

  • text-stroke-width:定义边框的宽度。
  • text-stroke-color:定义边框的颜色。

语法

复制代码
p{text-stroke:width="宽度值" color="色值"};

文本溢出:text-overflow

语法

复制代码
p{
  text-overflow:取值;
  }

|----------|---------------------------|
| 属性值 | 说明 |
| ellipsis | 当文本溢出时,显示省略号,并且隐藏多余的文字 |
| clip | 当文本溢出时,不显示省略号,而是将溢出的文字裁切掉 |

单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果,我们还需要结合white-space和overflow这两个属性来实现,下面是完整的语法:

复制代码
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

强制换行:word-wrap、word-break

语法

复制代码
p{
 word-wrap:取值;
或
word-break:取值;
  }

|------------|-----------|
| word-wrap属性取值 ||
| 属性值 | 说明 |
| normal | 自动换行(默认值) |
| break-word | 强制换行 |

|-----------|----------------|
| word-break属性取值 ||
| 属性值 | 说明 |
| normal | 自动换行(默认值) |
| break-all | 允许在单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |


  • word-wrap:break-word;用来决定是否允许单词内断句的。如果不允许的话,长单词就会溢出。它会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话再进行单词内的断句。
  • word-break:break-all;断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接就进行单词内的断句。
  • word-wrap和word-break这两个属性都是针对英文页面来说的,在中文页面中很少用到。

嵌入字体:@font-face

"嵌入字体",指的是把服务器中的字体文件下载到本地电脑,然后让浏览器端可以显示用户电脑没有安装的字体。

语法

复制代码
@font-face
{
  font-family: 字体名称;
  src:url(文件路径);
}

font-family属性用于定义字体的名称,src属性中的"文件路径"指的是服务器端中字体文件的路径。


相关推荐
Rhys..10 分钟前
ES6是什么
前端·javascript·es6
Jammingpro1 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05155 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI7 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
Pu_Nine_98 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front8 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie9 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀9 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻9 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树9 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法