CSSbox-shadow詳解

asing1elife發表於2018-09-29
CSS
版權宣告：本文首發 http://asing1elife.com ，轉載請註明出處。 https://blog.csdn.net/asing1elife/article/details/82876694

box-shadow 是 CSS3 的語法特性，可以實現為元素新增陰影

更多精彩

語法

/* x軸偏移 y軸偏移 模糊半徑 大小 顏色 位置 */
box-shadow: offsetX offsetY blur spread color position;

解析

offsetX : x軸偏移

  1. 取正值向右偏移，負值向左偏移
  2. box-shadow: 20px 0 10px 0 lightblue;
  3. box-shadow: -20px 0 10px 0 lightblue;

offsetY : y軸偏移

  1. 取正值向右偏移，負值向左偏移
  2. box-shadow: 0 20px 10px 0 lightblue;
  3. box-shadow: 0 -20px 10px 0 lightblue;

blur : 模糊半徑

  1. 取正值，值越大，陰影越模糊
  2. 取值為 0 則完全不模糊
  3. 取負值無效，按 0 處理
  4. 模糊的表現形式是向四周擴散，但四個邊角最淡，想要模糊效果比較均勻，可將元素設定為圓形

spread : 陰影大小

  1. 取正值，值越大，陰影越大
  2. 取負值，陰影大小的計算方式是元素寬高減去 spread 值，然後 blur 設定的模糊陰影會向內靠攏

color : 陰影顏色

position : 位置

  1. 預設陰影向外延展，取值 inset 會將陰影改為向內延展

擴充套件

box-shadow 和 background 一樣支援設定多值

box-shadow: 0 0px 10px 10px lightblue,
			  0 0px 10px 10px lightblue inset;

物體倒影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>box-shadow</title>
    <style type="text/css">
    #shadowContainer {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 200px auto;
        position: relative;
        transition: transform 1s;
        border-radius: 50%;
        animation: circleUp 1s 2s both infinite alternate;
    }

    #shadowContainer::after {
        content: "";
        position: absolute;
        bottom: -50px;
        border-radius: 50%;
        width: 100%;
        height: 10px;
        background-color: rgba(255, 67, 66, 1.000);
        transition: transform 1s;
        box-shadow: 0 0 20px 1px rgba(255, 67, 66, 0.5);
        animation: circleShadowUp 1s 2s both infinite alternate;
    }

    @keyframes circleUp {
    	0% {
			transform: translateY(0);
    	}

    	100% {
			transform: translateY(-40px);
    	}
    }

    @keyframes circleShadowUp {
    	0% {
			transform: translateY(0) scale(1);
    	}

    	100% {
			transform: translateY(40px) scale(0.75);
    	}
    }
    </style>
</head>

<body>
    <div id="shadowContainer"></div>
</body>

</html>


相關文章