专栏首页九彩拼盘的叨叨叨CSS Box Shadow 除了做阴影效果还能做啥

CSS Box Shadow 除了做阴影效果还能做啥

Box Shadow 可以用来 先介绍一下CSS Box Shadow 的语法

box-shadow: 
      [horizontal offset] [vertical offset] [blur radius] 
      [spread radius] [color] [inset];

说明:

  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊距离。默认值为0。
  • spread 可选。阴影的尺寸。默认值为0。若为正值,则比自身大,负值则比自身小。
  • color 可选。阴影的颜色。
  • inset 可选。将外部阴影 (outset) 改为内部阴影。值为inset。

例如,我们写如下的代码

.shadow {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
}

其效果如下

Box Shadow.png

有意思的是,Box Shadow支持多个值,值之间用,分隔。也就是说,一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量,不设置模糊距离(默认为0,即不模糊),则可以达到用Box Shadow拷贝自身的目的~如果我们这样写N多个值,就可以拷贝N个自身。然后还可以通过spread来调节拷贝的大小,color来调节拷贝的背景色。

如下图中邮票的边缘,即为一个圆形不断拷贝,而形成的

demo.png

主要代码为

.target {
        background-color: #fff;
        position: relative;
        width: 195px;
        height: 195px;
        margin: 50px auto;
        overflow: hidden;
    }
    
    .target::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgb(114, 188, 191);
        box-shadow: 15px 0 0 rgb(114, 188, 191), 
                    30px 0 0 rgb(114, 188, 191), 
                    45px 0 0 rgb(114, 188, 191), 
                    60px 0 0 rgb(114, 188, 191), 还有很多;
    }

Have Fun!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sass 写法示例

    CSS 本身是非常强大的,但随着样式表变大,变复杂,维护 CSS 变得越来越难。这时候预处理就有用了。Sass 是一种预处理,它能让你使用一些 CSS 中没有的...

    Joel
  • 移动端页面使用rem来做适配

    rem(font size of the root element)是指相对于根元素(即html元素)的字体大小的单位。 假设根元素的字体大小是10px, 则...

    Joel
  • 17个场景,带你入门CSS布局

    CSS 布局本质就是控制元素的位置和大小。比如这样的布局:元素宽960px,水平居中。宽960px是大小。水平居中是位置。又如这样的布局:两个元素在一行,左侧元...

    Joel
  • 博客园博客排版(js样式实例)

    昨天在博客园中看到一位大神发的博客园样式排版博客,我一看。妈呀,太漂亮了,二话不说赶快学起,昨天我花了一天的时间,终于把我的博客也弄得有一丢丢像样了,有好东西,...

    Dawnzhang
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631
  • 详解:30 text-shadow的开端

    核心知识点是:text-shadow:x y 模糊的大小 模糊的颜色,请大家记住一点:xy可以负数形式出现 嘿嘿。核心是复制哈

    用户7873631
  • 使用iframe实现在pc端预览移动端页面的效果

    前段时间需要做一个在PC端预览移动端的功能,由于我是前端不太好,就在网上查找资料,花了半天的时间终于有所收获,在这里把我的实现代码分享给大家。想要在PC端实现模...

    AlbertYang
  • 动态内容的等高布局实现

    首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

    RobinsonZhang
  • 博客园样式管理总结(个人博客园装修指南)

    参考博客:https://www.cnblogs.com/maxiaodoubao/p/9854705.html

    CherishTheYouth

扫码关注云+社区

领取腾讯云代金券