web前端开发个人技术博客
当前位置: HTML/CSS > css3中box-shadow的奇特用法

css3中box-shadow的奇特用法

2018-12-12 分类:HTML/CSS 作者:码云 阅读(164)

box-shadow属性是css3中的一个属性,几乎可以在人和元素上添加阴影效果,通过它我们可以做出很多非常酷的东西。接下来我将为大家讲解box-shadow属性的奇特使用方法。

兼容性

css3中box-shadow的奇特用法

语法

1
box-shadow: h-shadow v-shadow blur spread color inset;

它有六个属性值,前两个必填,后面都是可选。第四个值是阴影尺寸,就是用这个值来制作多重边框的!

第六个属性inset和outset,是内部阴影和外部阴影,默认是外部阴影。

注释:box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

box-shadow向框添加一个或多个阴影

技巧一:偏移和连写

在手机端我们会看到导航按钮“三道杠”,这里我们可以用box-shadow的偏移效果来书写移动端导航按钮“三道杠”,如下图:

手机端我们会看到导航按钮“三道杠”

上图正是运用了box-shadow的偏移和连写!什么是连写?就是我们可以书写多个box-shadow,并用“,”进行分割。达到不同的效果!

三道杠的代码书写如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sdg{
width:45px;
height:45px;
line-height:2.6;
border:1px solid #fff;
}
.sdg::before{
content:"";
width:20px;
height:2px;
background:#fff;
display:inline-block;
box-shadow:0 7px 0 #fff,0 -7px 0 #fff;
}

上面代码,我们用一个伪元素,书写了中间的一道杠,然后用box-shadow:07px0#fff,0-7px0#fff;书写了上面和下面的两道杠,分别偏移是7px。

技巧二:多重边框

先看一下效果图:

用box-shadow实现多重边框

核心代码如下:

1
2
3
4
5
6
.box{
background:yellowgreen;
box-shadow:0 0 0 10px #665,
           0 0 0 15px deeppink,
           0 2px 5px 15px rgba(0,0,0,.6);
}

想写几个边框,就用逗号连写几个,用起来非常方便!

另外,我们还可以用outline(描边)方案进行多重边框的书写,以及运用box-shadow和outline进行边框内圆角的书写!在这里我就不多介绍了!需要深入了解的,建议去朋友那边搞一本《css揭秘》读读!

结束语

以上就是今天码云笔记为大家带来的关于css3中box-shadow的奇特用法的全部内容,假如对你有帮助,请分享出去让大家一起学习,同时,你有更好的方法技巧可以留言我们一起探讨,感谢阅读!

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(3) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
3

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - css3中box-shadow的奇特用法

  1. 佛在我心 Linux Chrome 62.0.3202.84

    感谢分享

  2. 不可能咯 Linux Chrome 62.0.3202.84

    这就是奇淫技巧啊

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论