zoukankan      html  css  js  c++  java
  • [CSS] Create Basic Effects with CSS box-shadow

    Learn about the required and expanded syntax of CSS box-shadow. Then, create various kinds of effects such as shadows inside the element, a shadow that equally surrounds the element, realistic placement of the shadow, pseudo-borders, and layered effects by defining multiple shadows.

     
    .card {
      // Required box-shadow props
      // offset-x offset-y color
      box-shadow: 5px 8px black;
    
      // box-shadow blur
      // offset-x offset-y blur-radius color
      box-shadow: 5px 8px 10px black;
    
      // offset-x offset-y blur-radius spread-radius color
      box-shadow: 5px 8px 10px 5px black;
    
      // inset offset-x offset-y blur-radius spread-radius color
      box-shadow: inset 3px 3px 5px 2px black;
    
      // Negative values for offset
      box-shadow: -5px -5px 10px black;
    
      // Negative values for spread-radius
      box-shadow: 8px 8px 8px -6px black;
    
      // blur-radius only for equal shadow
      box-shadow: 0 0 20px black;
    
      // Pseudo-border with spread-radius only
      box-shadow: 0 0 0 5px black;
    
      // Multiple shadows
      box-shadow: 
        // pseudo-border
        0 0 0 3px #79009e, 
        // y-offset shadow with negative spread-radius
        0 10px 20px -5px #79009e;
    }
    
    @import "base";

  • 相关阅读:
    Python-内置函数
    Python-匿名函数
    Python-函数递归-二分法
    Python-函数递归
    Day4-函数
    CSS-定位
    CSS-文本属性,文字属性
    CSS-浮动
    CSS-盒模型
    CSS-继承和层叠
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13446800.html
Copyright © 2011-2022 走看看