ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

C3之text属性的补充

2020-12-06 09:32:22  阅读：139  来源： 互联网

标签：text top background C3 对齐 shadow 0px 属性


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- */
}

标签：text,top,background,C3,对齐,shadow,0px,属性
来源： https://blog.csdn.net/qq_46179838/article/details/109765555

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有