提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css 内暗影怎么做【css教程】,css

CSS3 box-shadow 属性用来形貌一个元素的一个或多个暗影结果,该属性险些能够让你完成你想要的任何暗影结果。但是 box-shadow 属性语法和取值异常天真,关于新手有点不容易明白。

模仿地点:https://www.html.cn/tool/css3Preview/Box-Shadow.html

CSS 代码:

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
 
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
 
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
 
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
 
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
 
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

取值申明:

inset: 默许暗影在边框外。运用 inset 后,暗影在边框内(即使是通明边框),背景之上内容之下。也有些人喜好把这个值放在末了,浏览器也支撑。

<offset-x> <offset-y>: 这是头两个 <length>值,用来设置暗影偏移量。<offset-x> 设置程度偏移量,假如是负值则暗影位于元素左侧。 <offset-y> 设置垂直偏移量,假如是负值则暗影位于元素上面。可用单元请检察 <length>。假如二者都是0,那末暗影位于元素背面。这时候假如设置了 <blur-radius> 或 <spread-radius> 则有隐约结果。

<blur-radius>: 这是第三个 <length> 值。值越大,隐约面积越大,暗影就越大越淡。 不能为负值。默许为0,此时暗影边沿锋利。

<spread-radius> : 这是第四个 <length> 值。取正值时,暗影扩展;取负值时,暗影压缩。默许为0,此时暗影与元素一样大。

<color> : 相干事项检察 <color> 。假如没有指定,则由浏览器决议——通常是color的值,不过现在Safari取通明。

以上就是css 内暗影怎样做的细致内容,更多请关注ki4网别的相干文章!

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

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"css 内暗影怎么做【css教程】,css"

最新评论

    暂无留言哦~~

博客简介

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

友情链接

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

服务热线:
 

 QQ在线交流

 旺旺在线