• 文字样式以及排版


    文字阴影
    text-shadow:x y blur color, …
    参数
    x 横向偏移
    y 纵向偏移
    blur 模糊距离
    color 阴影颜色
    文本阴影如果加很多层,会很卡

     1 /*双重阴影*/
     2 p:nth-last-of-type(1){
     3     color:red; font-size:80px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;text-align: center;
     4 }
     5 /*光晕文字*/
     6 p:nth-of-type(4){
     7     color:white; font-size:80px; text-align: center;text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
     8 }
     9 /*火焰文字*/
    10 p:nth-child(5){
    11        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:80px; font-weight:bold; color:white;text-align: center;
    12 }

    文字排版:
    Direction 定义文字排列方式(全兼容)
    Rtl 从右向左排列
    Ltr 从右向左排列
    注意要配合unicode-bidi 一块使用

    我发现可以反转文字的

    //排版
    span{font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}
    
    <span>博客园</span>

    Text-overflow 定义省略文本的处理方式
    clip 无省略号
    Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap(不换行)一块使用)

    p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    <p>博客园是国内最好的学习交流网站,博客园是国内最好的学习交流网站,博客园是国内最好的学习交流网站</p>
  • 相关阅读:
    upcoj 2169 DP
    hdu3415 单调队列
    hdu4417(树状数组)(线段树)(划分树+二分)
    poj3264 线段树水题
    STL Map hdu1004,1075,1263
    hdu1166线段树水题
    <<<<<<<<<用来存代码哒!!!!>>>>>>>>>>>>
    jQuery
    apache配置php
    linux关机、重启命令
  • 原文地址:https://www.cnblogs.com/guohuiru/p/5194715.html
Copyright © 2020-2023  润新知