C3之text属性的补充

2024-02-06 08:46:28

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>

效果图C3之text属性的补充


应用二：镂刻效果

<!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>

效果图C3之text属性的补充

应用三：当鼠标移入文字时，文字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>

C3之text属性的补充

在编写代码时遇到了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相似，但它会尽量保证一个英文的完整

C3之text属性的补充

C3之text属性的补充

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对齐

下面这张图更有利于我们理解基线的位置
C3之text属性的补充
结合练习就可以明白啦

<!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>

C3之text属性的补充

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- */
}
上一篇：elementui 的tabs组件出现蓝色边框问题


下一篇：CSS3属性