zoukankan      html  css  js  c++  java
  • css3文本和颜色

    1、文本阴影text-shadow

    语法 text-shadow:X-Offset Y-Offset blur color;

    X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;      

    Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;

    Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;

    Color:是指阴影的颜色,其可以使用rgba色。

    比如,我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff

    2、word-wrap(文字边界换行):normal|break-word(强制换行);   

    word-break:break-all(强制换行,不区分单词)| keep-all(区分单词,把单词展示完全)| normal

    3、white-space (对空白操作,也可用于换行)

    white-space:pre (保留所有空格,包括换行)| nowrap(不换行,文字将展示在一行内,并且不识别换行符和多个空格)| pre-line(保留换行符,合并空格,换行由单词长度决定,单词展现完全)//此属性不支持IE7.0-/Firefox3.0-和Opera9.2-以下版本浏览器| pre-wrap 保留换行符和空格,正常换行 //此属性不支持IE7.0和Firefox3.0以下版本浏览器

    white-space的应用:超出部分打点

        <style>
               p{
                   150px;
                   height:200px;
                   border:1px solid #000;
                   overflow:hidden;
                   white-space:nowrap;
                   text-overflow:ellipsis;
               }
        </style>    
    </head>
    
        <body>
             <p>ndkfokdjfgjfldmg;dfmg;dkg;kdjfjfjjffjj</p>
        </body>

    4、自定义字体    font-face

    @font-face{ font-family:”myFirstFont”;

       src:url('Sansation_Light.ttf'),

             url(‘Sansation_Light.eot') format(‘eot’);

          }

       p{

          font-family:”myFristFont”;

          }

         地址:http://www.w3cplus.com/content/css3-font-face

       format: 此值指的是你自定义的字体的格式,主要用来帮助浏览器识别浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,浏览器自身也无法通过路径后缀来判断字体

    5、文本溢出属性text-overflow  

    text-overflow:clip | ellipsis;    文本溢出切断 |  省略号

    超出打点功能:

                   overflow:hidden;
                   white-space:nowrap;
                   text-overflow:ellipsis;

      6、columns多列布局

    为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。

    语法: columns: [column-width] [column-count];

    column-指每一列的宽度 根据容器宽度自适应 (最小宽度)

    column-count:指规定的列数 唯一精准的是列数

    不要两一起使用 会乱

  • 相关阅读:
    Kotlin泛型与协变及逆变原理剖析
    struts2中action的class属性值意义
    重新设置Eclipse的workspace路径
    windows下将mysql加入环境变量
    Eclipse插件安装4种方法
    Maven常用命令
    IntelliJ IDEA光标变粗 backspace无法删除内容解决方法
    Weblogic Exception in AppMerge flows' progression
    Oracle的dual
    lgp20151222 解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
  • 原文地址:https://www.cnblogs.com/tianya-guoke/p/10188072.html
Copyright © 2011-2022 走看看