精华内容
下载资源
问答
  • css字体阴影如何加深?css设置字体阴影使用text-shadow属性。语法:text-shadow: h-shadow v-shadow blur color;参数:h-shadow 水平阴影的位置v-shadow 垂直阴影的位置blur 模糊的距离color 阴影的颜色tex...

    CSS3设置字体阴影效果使用 text-shadow 属性,下面我们来介绍下加深字体阴影的方法,希望对各位有帮助!

    5e21149f707bd194.jpg

    css字体阴影如何加深?

    css设置字体阴影使用text-shadow属性。

    语法:text-shadow: h-shadow v-shadow blur color;

    参数:h-shadow 水平阴影的位置

    v-shadow 垂直阴影的位置

    blur 模糊的距离

    color 阴影的颜色

    text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

    (推荐学习:CSS视频教程)

    加深字体阴影的方法:

    1、通过合适的模糊半径来加深阴影// html

    模糊半径为1px字体阴影

    模糊半径为2px字体阴影

    模糊半径为3px字体阴影

    模糊半径为4px字体阴影

    模糊半径为5px字体阴影

    模糊半径为6px字体阴影

    模糊半径为7px字体阴影

    // css

    .a{

    text-shadow: 0 0 1px #000;

    }

    .b{

    text-shadow: 0 0 2px #000;

    }

    .c{

    text-shadow: 0 0 3px #000;

    }

    .d{

    text-shadow: 0 0 4px #000;

    }

    .e{

    text-shadow: 0 0 5px #000;

    }

    .f{

    text-shadow: 0 0 6px #000;

    }

    .g{

    text-shadow: 0 0 7px #000;

    }

    效果:

    1579225843660273.png

    可以看见当模糊半径为3-4px时,阴影最深。

    2、使用绝对定位,让多个具有阴影的字体叠加// html

    两个具有阴影的字体叠加效果

    两个具有阴影的字体叠加效果

    // css

    .wrap{

    position: relative;

    }

    .wrap > p{

    position: absolute;

    text-shadow: 0 0 6px #000;

    }

    1579225970174058.png

    可以看见,通过这种方式,能够获得更深的阴影。

    更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

    展开全文
  • CSS学习(十)-CSS字体、CSS字体阴影

    千次阅读 2016-03-09 23:06:31
    1.css字体类型 a.font-family 字体类型 b.font-style 字体样式 c.font-weight 粗细,可设置数字 d.font-size-adjust 是否强制对文本使用同一尺寸 e.font-stretch 横向拉伸变形字体 f.foont-variant 字体大小写...
    一、理论:
    1.css字体类型
    a.font-family 字体类型
    b.font-style 字体样式
    c.font-weight 粗细,可设置数字
    d.font-size-adjust 是否强制对文本使用同一尺寸
    e.font-stretch 横向拉伸变形字体
    f.foont-variant 字体大小写
    2.css文本类型
    a.word-spacing 词间距
    b.letter-spacing 字符间距
    c.vertical-align 文本垂直对齐方式
    d.text-decoration 文本修饰线
    e.text-indent 文本首行缩进
    f.text-align 文本水平对齐方式
    g.line-height 文本行高
    h.text-transform 文本大小写
    i.text-shadow 文本阴影大小
    j.while-space 文字之间和文本之间的空白符间距
    k.direction 文本流入方向 
    3.text-shadow 文本阴影属性
    a.color 阴影颜色
    b.x-offset X轴位移
    c.y-offset Y轴位移 
    d.blur-radius 阴影模糊半径
    e.IE滤镜 filter:shadow

    二、实践:

    1.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            .text-wrap{
                width: 600px;
                margin: 10px auto;
                padding: 10px 0;
                border: 5px solid #289356;
                position: relative;
                box-shadow: 0 0 4px rgba(0,0,37,0.80);
                clear: both;
                font-family: Arial,Serif;
                font-size: 50px;
                text-align: center;
                color: #f6f6f6;
            }
            .box1{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px 0px 0 rgb(173,163,153),
                    2px 0px 0 rgb(156,138,126),
                    3px 0px 0 rgb(173,153,123),
                    4px 0px 0 rgb(126,116,136),
                    5px 0px 0 rgb(111,101,131),
                    6px 0px 0 rgb(195,185,175),
                    7px 0px 0 rgb(179,169,159),
                    8px 0px 7px rgb(0,0,0,0.35),
                    8px 0px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box2{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px -1px 0 rgb(173,163,153),
                    2px -2px 0 rgb(156,138,126),
                    3px -3px 0 rgb(173,153,123),
                    4px -4px 0 rgb(126,116,136),
                    5px -5px 0 rgb(111,101,131),
                    6px -6px 0 rgb(195,185,175),
                    7px -7px 0 rgb(179,169,159),
                    8px -8px 7px rgb(0,0,0,0.35),
                    8px -8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box3{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    0px -1px 0 rgb(173,163,153),
                    0px -2px 0 rgb(156,138,126),
                    0px -3px 0 rgb(173,153,123),
                    0px -4px 0 rgb(126,116,136),
                    0px -5px 0 rgb(111,101,131),
                    0px -6px 0 rgb(195,185,175),
                    0px -7px 0 rgb(179,169,159),
                    0px -8px 7px rgb(0,0,0,0.35),
                    0px -8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box4{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    -1px -1px 0 rgb(173,163,153),
                    -2px -2px 0 rgb(156,138,126),
                    -3px -3px 0 rgb(173,153,123),
                    -4px -4px 0 rgb(126,116,136),
                    -5px -5px 0 rgb(111,101,131),
                    -6px -6px 0 rgb(195,185,175),
                    -7px -7px 0 rgb(179,169,159),
                    -8px -8px 7px rgb(0,0,0,0.35),
                    -8px -8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box5{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    -1px 0px 0 rgb(173,163,153),
                    -2px 0px 0 rgb(156,138,126),
                    -3px 0px 0 rgb(173,153,123),
                    -4px 0px 0 rgb(126,116,136),
                    -5px 0px 0 rgb(111,101,131),
                    -6px 0px 0 rgb(195,185,175),
                    -7px 0px 0 rgb(179,169,159),
                    -8px 0px 7px rgb(0,0,0,0.35),
                    -8px 0px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box6{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    -1px 1px  0 rgb(173,163,153),
                    -2px 2px 0 rgb(156,138,126),
                    -3px 3px 0 rgb(173,153,123),
                    -4px 4px 0 rgb(126,116,136),
                    -5px 5px 0 rgb(111,101,131),
                    -6px 6px 0 rgb(195,185,175),
                    -7px 7px 0 rgb(179,169,159),
                    -8px 8px 7px rgb(0,0,0,0.35),
                    -8px 8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box7{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    0px 1px 0 rgb(173,163,153),
                    0px 2px 0 rgb(156,138,126),
                    0px 3px 0 rgb(173,153,123),
                    0px 4px 0 rgb(126,116,136),
                    0px 5px 0 rgb(111,101,131),
                    0px 6px 0 rgb(195,185,175),
                    0px 7px 0 rgb(179,169,159),
                    0px 8px 7px rgb(0,0,0,0.35),
                    0px 8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box8{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px 1px 0 rgb(173,163,153),
                    2px 2px 0 rgb(156,138,126),
                    3px 3px 0 rgb(173,153,123),
                    4px 4px 0 rgb(126,116,136),
                    5px 5px 0 rgb(111,101,131),
                    6px 6px 0 rgb(195,185,175),
                    7px 7px 0 rgb(179,169,159),
                    8px 8px 7px rgb(0,0,0,0.35),
                    8px 8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
            .box9{
                text-shadow:
                    0px 0px 0 rgb(188,178,188),
                    1px 1px 0 rgb(173,163,153),
                    2px 2px 0 rgb(156,138,126),
                    3px 3px 0 rgb(173,153,123),
                    4px 4px 0 rgb(126,116,136),
                    5px 5px 0 rgb(111,101,131),
                    6px 6px 0 rgb(195,185,175),
                    7px 7px 0 rgb(179,169,159),
                    8px 8px 7px rgb(0,0,0,0.35),
                    8px 8px 1px rgb(0,0,0,0.5),
                    0px 0px 7px rgb(0,0,0,.2);
            }
        </style>
    </head>
    <body>
        <div class="text-wrap box1">W3cplus (0 deg)</div>
        <div class="text-wrap box2">W3cplus (45 deg)</div>
        <div class="text-wrap box3">W3cplus (90 deg)</div>
        <div class="text-wrap box4">W3cplus (135 deg)</div>
        <div class="text-wrap box5">W3cplus (180 deg)</div>
        <div class="text-wrap box6">W3cplus (225 deg)</div>
        <div class="text-wrap box7">W3cplus (270 deg)</div>
        <div class="text-wrap box8">W3cplus (315 deg)</div>
        <div class="text-wrap box9">W3cplus (360 deg)</div>
    </body>
    </html>


    展开全文
  • css 字体阴影text-shadow

    2011-09-26 11:17:53
    text-shadow的语法: text-shadow:color length length length; color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”

    text-shadow的语法:

    text-shadow:color length length length;

    color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”

    展开全文
  • 然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文字字体阴影效果来解决此问题。 2.例子说明 未加入字体阴影之前的效果 加入字体阴影的效果 如果没加入字体阴影的效果...

    1.前言

    最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看。然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文字字体阴影效果来解决此问题。

    2.例子说明

    未加入字体阴影之前的效果

       

    加入字体阴影的效果

    如果没加入字体阴影的效果,左图会看不清哪些文字的,而右图没有多大区别。

    3.相关代码

    <div> 
      <img alt="imageSample" style="width:160px;height:90px" data-imgSize="<%=size%>" data-imgResolution="<%=resolution%>" src="http://localhost:8080/xxx/static/images/list/<%=fileName%>">
      <span id="hoverTip" style="font-size:12px;text-shadow:0px 0px 10px #000;color:#ffffff;width:160px;height:20px;position:relative;bottom:33px">
      </span>
    </div> 
    text-shadow:0px 0px 10px #000;
    第一个参数0px:代表阴影距离左5px显示
    第二个参数0px:代表阴影距离上5px显示
    第三个参数10px:代表阴影大小的范围
    第四个参数#000:代表圆阴影颜色
    position:relative;bottom:33px
    加入此属性,文字的span标签就可以让其漂在图片上面
    $('.eachimg').hover(
                    function() {
                        var tip = "Image Size:"+$(this).find('img').attr('data-imgSize')+" Resolution:"+$(this).find('img').attr('data-imgResolution');
                        $(this).find('#hoverTip').html(tip);
                        $(this).find('#hoverTip').css("display","block");
                        //$(this).find('#hoverTip').fadeIn();
                        //$(this).find('#hoverTip').show(100);
                    },
                    function(){
                        $(this).find('#hoverTip').css("display","none");
                        //$(this).find('#hoverTip').fadeOut();
                        //$(this).find('#hoverTip').hide(100);
                    }
                );
    说明一下,上面显示隐藏,有三种方案,fadeIn和fadeOut 从底向上淡入淡出,show和hide是从左上角慢慢地淡入淡出,后两种方案,目前这个代码会出现一个问题,当你多次快速经过某张图片时,由于有延时性,所以淡入淡出会出现多次。
    4.总结
    这个小功能主要是用到了css相对位置和字体阴影的特性及jquery的hover的方法。

    转载于:https://www.cnblogs.com/fanbi/p/7044587.html

    展开全文
  • css设置字体阴影的方法:使用代码【text-shadow:3px 3px 3px #00f;】,【text-shadow】属性应用于阴影文本,语法为【text-shadow: h-shadow v-shadow blur color;】。本教程操作环境:windows10系统、css3版,该方法...
  • 最近在整理学习CSS3的一些小知识,现在已经整理了CSS3选择器,CSS3圆角和CSS3元素阴影属性的使用方法了。今天为大家整理一下CSS3中的字体阴影——text-shadow的使用方法。希望能对大家有所帮助吧
  • CSS 字体、边框阴影

    2018-04-13 08:29:00
    box-shadow属性向框添加一个或多个阴影 box-shadow的JS语法为: object.style.boxShadow="10px 10px 5px #888888" CSS语法: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow 水平....
  • css3设置字体阴影

    千次阅读 2018-11-29 15:30:25
    给文字加上阴影效果 .text-shaw{ text-shadow: 0px 6px 1px #83ACDB; } 效果 阴影的偏移位置属性设置 text-shadow: X-offset(X轴偏移量) Y-offset(Y轴偏移量) Blur(模糊半径) Color(颜色);...
  • text-shadow为css文字阴影、css字体投影与字体阴影含胡效用效果的CSS属性单词css text-shadow阴影功效一、text-shadow先容text-shadow是CSS格局属性单词,是配置对象中文本的翰墨字体能否有阴影及含糊成果的CSS名堂...
  • css 利用阴影字体加粗

    千次阅读 2016-08-12 20:39:25
    也达不到要求时,可以利用css的text-shadow给字体加上多个阴影从而把字体调的更粗一点,当然直接换字体也是可以的。 正常字体粗细 使用标签和显示效果差不多 font-weight为900时 font-size:30px; font-weight:...
  • css怎么设置字体阴影CSS怎么设置字体阴影css设置字体阴影的方法:【text-shadow :3 px3px # 00f;】Text-shadow属性应用于阴影文本,语法为[Text-shadow :h-shadow v-shadow blur color;】.环境:本文适用于所有...
  • 使用CSS3制作特殊字体 如 火焰、霓虹效果: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;文本阴影特殊效果的...
  • text-shadow:为字体添加阴影, 可以通过对text-shadow属性设置相关的属性值,来实现现一些需要的字体阴影效果,减少了图片的使用。 基础说明: text-shadow: ...
  • CSS字体样式: font-family: 字体 font-size: 大小 font-weight: 粗细 color: 颜色 CSS文本样式: text-align: 排版(:center居中) text-indent:首行缩进 line-height: 行高 text-decoration: 装饰(:none ...
  • CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。 一、CSS3单词与语法 - TOP 1、CSS3单词...
  • css代码: /*边框*/ .shadow_border{border: 1px solid #000;padding: 60px; width:100px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: #666 0px 0px 10px;-moz-b...
  • css如何再字体外加阴影

    千次阅读 2019-09-28 10:54:13
    css /*文字*/ .shadow_font{text-shadow: #f00 3px 3px 3px;}/*此处阴影用了红色的看上去比较明显,颜色可以根据需要修改,包括阴影的像素值*/ html <span class="shadow_font">阴影</span> 具体情况...
  • 1.阴影:文字阴影:text-shadow 边框阴影: box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; 2.半透明效果:rgba单个属性 opacity整体属性 aslh第四个属性标识透明度。 3.不允许文本换行 4.Border-...
  • 要么就是字体通过字体叠加也能够实现阴影效果。下面就来介绍一种实现阴影效果的方法。 阴影效果一般就是用来配合在进行一些点击或者鼠标浮动的时候会出现效果反馈。这里为了便于说明我使用了 ul ...
  • 1.实现渐变色字体关键用到了这个属性:-webkit-background-clip: text; .colorful{ width: fit-content; color: transparent; background-image: linear-gradient(45deg, #ff...2.实现字体阴影关键用到了这个属
  • 字体出现阴影,各种阴影效果,只需要属性的合理运用
  • Css字体特效

    2021-01-31 14:30:27
    Css字体特效 要做的效果如下:用css做出一个动态的字体效果 首先html部分先给body标签一个背景颜色,再包裹一个div,div中包裹span,最后随便给点文字 在这里插入图片描述 这一段主要是设置一些基本样式和需要给...
  • css字体

    2019-10-02 06:32:37
    /* 渐变阴影效果 */-webkit-box-shadow:0 0 10px #06c;/* div内阴影为白色 */box-shadow: inset 0px 0px 30px white; -webkit-text-fill-color: white;/*文字的填充色*/ -webkit-text-stroke: 2px black;/*描边的...
  • CSS 字体效果

    2017-08-12 13:48:37
    CSS 字体效果 text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用...
  • 在DW里面的CSS设置字体阴影效果

    千次阅读 2013-11-06 09:22:38
    在DW里面的CSS设置字体阴影效果  2008-03-21 07:51:15| 分类: 默认分类|字号 订阅 想要什么效果你自己挑       滤镜    div {font-family: 黑体; font-size: 45px; height:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,025
精华内容 410
关键字:

css字体阴影