本文详细介绍了CSS3中的text-shadow属性，包括浮雕、镂刻效果的实现，以及与background的结合使用。同时，还讨论了white-space、word-break、text-transform等文本相关属性，帮助理解文本的布局和格式控制。
text属性
一、text-shadow 文本阴影
1、书写格式：水平偏移量 垂直偏移量 模糊值 阴影颜色；
2、浮雕和镂刻效果的实现
可能浮雕和镂刻的效果感觉相差不太大，但是日常生活中还是会用的，知道怎么去用就可以啦
应用一：浮雕效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow练习</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color: #0ff;
}
div{
font-size:80px;
font-weight: bold;
position:absolute;
left:150px;
top:50px;
color:#ddd;
width:700px;
height:100px;
text-shadow:1px 1px #000,
-1px -1px #fff;
}
</style>
</head>
<body>
<div>TEXT SHADOW</div>
</body>
</html>
效果图
应用二：镂刻效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow练习</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color: #0ff;
}
div{
font-size:80px;
font-weight: bold;
position:absolute;
left:150px;
top:50px;
color:#ddd;
width:700px;
height:100px;
text-shadow:-1px -1px #000,
1px 1px #fff;
}
</style>
</head>
<body>
<div>TEXT SHADOW</div>
</body>
</html>
效果图
应用三：当鼠标移入文字时，文字ACCESS前面慢慢出现带有火焰效果的NO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>text-shadow练习</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000;
}
div {
font-size: 80px;
font-weight: bold;
position: absolute;
left: 150px;
top: 50px;
color: #ddd;
width: 700px;
height: 100px;
text-shadow: 0px 0px 10px #0f0,
0px 0px 20px #0f0,
0px 0px 30px #0f0;
transition: all 2s;
}
div:hover {
text-shadow: 0px 0px 10px #f10,
0px 0px 20px #f20,
0px 0px 30px #f30;
}
div:before {
content: "NO";
opacity: 0;
text-shadow: 0px 0px 10px #f00,
0px 0px 20px #f10,
0px 0px 30px #f20,
0px -5px 20px #f10,
0px -10px 30px #f20,
0px -15px 40px #f10,
0px -20px 40px #f20;
transition: all 3s;
}
div:hover:before {
opacity: 1;
}
</style>
</head>
<body>
<!-- 当鼠标移入文字时，文字前面慢慢出现带有火焰效果的NO -->
<div>ACCESS</div>
</body>
</html>
这里就不展示效果图了，感兴趣的小伙伴可以去试一下
应用四：多重阴影
3、与background的结合
补充一个小知识点：
text-fill-color属性是给指定的文字填充颜色，并且只有与background-clip搭配使用才可以在谷歌浏览器展示效果（谷歌独有）
具体写法如下
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-fill-color:transparent;
结合练习：迷人眼神
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #000;
}
div {
position: absolute;
left: calc(50% - 100px);
top: 80px;
width: 250px;
height: 80px;
font-size: 60px;
font-weight: bold;
background-image: url(img/水粉眼.jpg);
background-size: 320px 150px;
background-position: -400px -22px;
background-repeat: no-repeat;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 2s;
text-shadow: -6px -6px 3px rgba(255, 0, 223, .2),
5px 5px 3px rgba(139, 223, 223, .2);
}
div:hover {
background-position: -25px -22px;
}
</style>
</head>
<body>
<div>迷人的眼</div>
</body>
</html>
在编写代码时遇到了text-shadow和background-clip的文字剪切问题，当我设置text-shadow: 0px 0px 3px #000；时，鼠标移动到文字上面时发现背景图片并未显示。
简洁的说就是阴影已经跑到了文字的上面，为什么会出现这个问题呢？
原因：使用
background-clip来剪切文字
一旦使用background-clip来剪切文字时，文字就会变成背景的一部分，所以背景肯定是在文字的下面的，那再当我给文字设置一个阴影时，这个阴影依然算内容的一部分，它可能在文字的下面，但肯定在背景上面，此时我的文字内容就已经变成背景了，所以我的text-shadow一定会在背景图片上面，也就造成text-shadow在内容的上面
解决方法：设置一个透明度，然后再调整一下text-shadow的水平和垂直偏移量。
二、其他属性
1、white-space：normal（默认值） | pre | nowrap | pre-wrap | pre-line
判断是否保留文本间的空格、换行和文本超过边界时是否换行。
normal：默认处理方式。
pre：原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。
nowrap：与normal值相似，但不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值相似，但不同的是文字超出边界时将自动换行。
pre-line：与normal值相似，但是会保留文本输入时的换行。
2、word-break：normal（默认值） | keep-all | break-all | break-word
normal：默认的换行规则。依据各自语言的规则，允许在字间发生换行。
keep-all：如果对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。（但会尽量保留一个完整的英语单词，如果过多就会超出）
break-all：强制换行，不保留英文的完整性。
break-word：与break-all相似，但它会尽量保证一个英文的完整
3、text-transform：none（默认值） | capitalize | uppercase | lowercase | full-width
capitalize：将每个单词的第一个字母转换成大写
uppercase：将每个单词转换成大写
lowercase：将每个单词转换成小写
full-width（兼容性不好，基本不用）
4、定义元素内容的水平对齐方式
text-align：start | end | left | right | center | justify | match-parent | justify-all
5、行内元素在行框内的垂直对齐方式
vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom
baseline：
把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐
sub：
把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）
super：
把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）
text-top：
把当前盒的top和父级的内容区的top对齐
text-bottom：
把当前盒的bottom和父级的内容区的bottom对齐
middle：
把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐
top：
把当前盒的top与行盒的top对齐
bottom：
把当前盒的bottom与行盒的bottom对齐
下面这张图更有利于我们理解基线的位置
结合练习就可以明白啦
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>1</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test p {
border: 1px solid #000;
font-size: 16px;
line-height: 2;
}
.test a {
margin-left: 5px;
font-size: 12px;
}
.baseline a {
vertical-align: baseline;
}
.sub a {
vertical-align: sub;
}
.super a {
vertical-align: super;
}
.top a {
vertical-align: top;
}
.text-top a {
vertical-align: text-top;
}
.middle a {
vertical-align: middle;
}
.bottom a {
vertical-align: bottom;
}
.text-bottom a {
vertical-align: text-bottom;
}
.length a {
vertical-align: 10px;
}
</style>
</head>
<body>
<ul class="test">
<li class="baseline">
<strong>与基线对齐</strong>
<p>参考内容<a href="#">基线对齐</a></p>
</li>
<li class="sub">
<strong>与参考内容的下标对齐</strong>
<p>参考内容<a href="#">下标对齐</a></p>
</li>
<li class="super">
<strong>与参考内容的上标对齐</strong>
<p>参考内容<a href="#">上标对齐</a></p>
</li>
<li class="top">
<strong>对象的内容与对象顶端对齐</strong>
<p>参考内容<a href="#">要对齐的内容</a></p>
</li>
<li class="text-top">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<a href="#">要对齐的内容</a></p>
</li>
<li class="middle">
<strong>对象的内容与对象中部对齐</strong>
<p>参考内容<a href="#">要对齐的内容</a></p>
</li>
<li class="bottom">
<strong>对象的内容与对象底端对齐</strong>
<p>参考内容<a href="#">要对齐的内容</a></p>
</li>
<li class="text-bottom">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<a href="#">要对齐的内容</a></p>
</li>
<li class="length">
<strong>与基线算起的偏移量</strong>
<p>参考内容<a href="#">偏移量对齐</a></p>
</li>
</ul>
</body>
</html>
6、引入字体包 @font-face
我们先了解一下字体的格式有哪些？
- TureTpe(.ttf) 微软和苹果研发
- OpenType（.opt） 微软和abode研发
- Web Open Font Format(.woff)
- Embedded Open Type(.eot) IE私有字体格式
- SVG(.svg) iOS 4.1支持
创建一个全浏览的兼容的自定义字体
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'), /* chrome、firefox */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
