Html5、CSS实现文字暗影结果实例分享-

本文主要介绍了运用Html5、CSS实现文字暗影结果的相干材料,需要的伴侣可以参照 下，但愿能帮忙到大家。 本文主要介绍了运用Html5、CSS实现文字暗影结果的相干材料,需要的伴侣可以参照 下，但愿能帮忙到大家。

前两天有一个学html5前端小美女问我一个有关文字暗影的结果怎么去实现。她和我说文字暗影嘛,她也晓得text-shadow,.但是却做不出想要的模样,其实css3的新功能是很强大的,不要把你的思想太甚于局限化,好了,闲话也未几说,咱们就先来看看这个文本暗影.

一.文字暗影

text-shadow 文字暗影参数: 参数1 : 第1个长度值用来设定对象的暗影水平偏移值。可认为负值 参数2 ：第2个长度值用来设定对象的暗影垂直偏移值。可认为负值 参数3 ：要是供给了第3个长度值则用来设定对象的暗影依稀值。不允许负值参数4 ： 设定对象的暗影的色彩

text-shadow: 10px 10px 50px #000;

二.实例

上图的结果我们如何来实现呢?

HTML构造 CSS样式字体样式字体色彩文本暗影 那我们来看一下概括代码:

HTML:

【惜墨如金】尚私塾

CSS:

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本暗影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}

此刻我们来看看前端小美女问我的结果该怎么做..

其实非常简略了,我们来直接上代码~

HTML:

【惜墨如金】尚私塾

CSS:

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不一样色彩的,多个不一样值的依稀大小*/
    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;
}

发散你的思维,其实css3样式非常有味,有时候往往是一点点转变,就可以实现很炫的结果^.^