提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS中增加暗影的要领有哪些【css教程】,CSS

在CSS中增加暗影的要领有三种,box-shadow、drop-shadow以及text-shadow,box-shadow增加暗影最简朴,drop-shadow能够依据图象大小增加暗影,text-shadow为笔墨增加暗影,下面我们就来看看这三种暗影增加的要领。

运用box-shadow增加暗影

运用CSS增加暗影时,box-shadow是最经常使用的要领。

box-shadow: 水平暗影 垂直暗影 隐约间隔 暗影的大小 暗影的色彩;

水平位置和垂直位置指定暗影显现的位置

依据正值和负值,位置将以下变化。

水平位置:正值:右,负值:左
垂直位置:正值:底部,负值:上部

暗影的隐约间隔和暗影的局限是决议暗影表面的数值。

一切数值单元都是px。

我们来看细致的示例

代码以下

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
    <img src="img/girl.jpg" class="sample-box-shadow" >
 
  </body>
</html>

CSS

.sample-box-shadow{
   box-shadow: 10px 10px 15px -10px;
}

运转结果以下

经由过程以上这类体式格局,能够轻松地为图象增加暗影。

怎样运用drop-shadow依据图象大小增加暗影?

filter: drop-shadow(摆布的暗影 高低的暗影 隐约间隔 暗影色彩);

摆布位置以及高低位置是指定原始图象的暗影位置的数字。

隐约前提指定表面的暗影的隐约水平,一切的单元都是px

drop-shadow与box-shadow的最大区分在于,您能够依据图象的大小设置暗影。

显现box-shadow和drop-shadow之间的差别:

这是一种异常有效的强调图象自身的要领,由于它能够像上面的图象一样为图象增加暗影

怎样运用text-shadow为笔墨增加暗影?

这是一种为笔墨增加暗影的要领

用法以下

text-shadow:水平暗影 垂直暗影 隐约水平 暗影色彩;

我们来看一个细致的示例

代码以下

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
 
    <link rel="stylesheet" href="sample.css" />
  </head>
 
  <body>
 
   <p class="sample-text-shadow" style="font-size: 40px">Text-Shadow-Sample</p>
 
  </body>
</html>

CSS

.sample-text-shadow{
   text-shadow:1px 3px 3px #513c3c;
}

运转结果以下

以上就是本篇文章的全部内容了,更多精彩内容人人能够关注ki4网的其他相干教程栏目!!!

以上就是CSS中增加暗影的要领有哪些的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS中增加暗影的要领有哪些【css教程】,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线