zoukankan      html  css  js  c++  java
  • css3学习笔记之文本效果

    CSS3的文本阴影

    CSS3中,text-shadow属性适用于文本阴影。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }
    </style>
    </head>
    <body>
     
    <h1>Text-shadow effect!</h1>
     
    <p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
     
    </body>
    </html>

    CSS3的换行

    如果某个单词太长,不适合在一个区域内,它扩展到外面:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
    <style
    p.test
    {
    11em; 
    border:1px solid #000000;
    word-wrap:break-word;
    }
    </style>
    </head>
    <body>
     
    <p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
     
    </body>
    </html>

    New Text Properties

    属性描述CSS
    hanging-punctuation 规定标点字符是否位于线框之外。 3
    punctuation-trim 规定是否对标点字符进行修剪。 3
    text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
    text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
    text-outline 规定文本的轮廓。 3
    text-overflow 规定当文本溢出包含元素时发生的事情。 3
    text-shadow 向文本添加阴影。 3
    text-wrap 规定文本的换行规则。 3
    word-break 规定非中日韩文本的换行规则。 3
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 3
  • 相关阅读:
    python3 bs4库
    python3 requests 库学习
    thinkPHP远程代码执行漏洞
    centos 数据库忘记密码
    centos 安装 nfs
    中间人工具---MITMF
    微信公众号授权获取codequ
    vue element 倒计时
    vue常见登陆注册按钮切换效果
    VUE3.0重新定向
  • 原文地址:https://www.cnblogs.com/aiyoubucuoo/p/5435412.html
Copyright © 2011-2022 走看看