box-shadow

營造層次感（立體感）
充當沒有寬度的邊框
特殊效果

/* x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插頁(陰影向內) | x偏移量 | y偏移量 | 陰影顏色 */
box-shadow: inset 5em 1em gold;

/* 任意數量的陰影，以逗號分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局關鍵字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

基本用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            background:red;
            width:200px;
            height:200px;
            margin: 100px;
            /* box-shadow: 5px 5px 10px 0 rgba(0,0,0,.2); */
            /* box-shadow: inset 5px 5px 10px 0 rgba(0,0,0,.2); */
            box-shadow: 0 0 0 5px green;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

高級用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            background:red;
            width:10px;
            height:10px;
            margin: 10px;
            border-radius: 5px;
            box-shadow: 200px 200px 0 5px green,
                230px 200px 0 5px green,
                215px 215px 0 -3px red;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            position: relative;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            margin: 300px auto;
            background-color: #C63D01;
            box-shadow: 0px 0px 0 1px #000,
                -20px -26px 0 -10px #333333,
                -34px -40px 0 15px #fff,
                -34px -40px 0 16px,
                20px -26px 0 -10px #333333,
                34px -40px 0 15px #fff,
                34px -40px 0 16px,
                0px 55px 0 75px #fff,
                0px 55px 0 76px #000,
                0 22px 0 120px #08BDEB,
                0 22px 0 121px #000;
        }
        /*叮噹貓的鼻子*/
        .container::before{
            content: '';
            position: absolute;
            bottom: -81px;
            left: 17px;
            height: 80px;
            width: 2px;
            background-color: #000;
        }
        /*叮噹貓的嘴巴*/
        .container::after{
            content: '';
            position: absolute;
            bottom: -83px;
            left: -44px;
            width: 125px;
            height: 70px;
            border-bottom-right-radius: 28px;
            border-bottom: solid 2px black;
            border-bottom-left-radius: 28px;
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

text-shadow

立體感
印刷質感

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin:0 auto;
            max-width: 800px;
            font-size: 18px;
            line-height: 2em;
            font-family: STKaiti;
            text-shadow: 1px 1px 0 #aaa;
        }
        .container p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>我與父親不相見已二年餘了，我最不能忘記的是他的背影。那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，我從北京到徐州，打算跟着父親奔喪回家。到徐州見着父親，看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說，“事已如此，不必難過，好在天無絕人之路！”</p>
        <p>回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半爲了喪事，一半爲了父親賦閒。喪事完畢，父親要到南京謀事，我也要回北京唸書，我們便同行。</p>
        <p>到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因爲事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有甚麼要緊的了。他躊躇了一會，終於決定還是自己送我去。我兩三回勸他不必去；他只說，“不要緊，他們去不好！”</p>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin:0 auto;
            max-width: 800px;
            font-size: 18px;
            line-height: 2em;
            font-family: STKaiti;
            background: black;
            text-shadow: -1px -1px 0 white,
                -1px 1px 0 white,
                1px -1px 0 white,
                1px 1px 0 white;
        }
        .container p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>我與父親不相見已二年餘了，我最不能忘記的是他的背影。那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子，我從北京到徐州，打算跟着父親奔喪回家。到徐州見着父親，看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說，“事已如此，不必難過，好在天無絕人之路！”</p>
        <p>回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半爲了喪事，一半爲了父親賦閒。喪事完畢，父親要到南京謀事，我也要回北京唸書，我們便同行。</p>
        <p>到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因爲事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有甚麼要緊的了。他躊躇了一會，終於決定還是自己送我去。我兩三回勸他不必去；他只說，“不要緊，他們去不好！”</p>
    </div>
</body>
</html>

border-radius

圓角矩形
圓形
半角/扇形
特殊角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 0;
            height: 0;
            background: red;
            border: 10px solid green;
            /* border-radius: 10px; */
            border-radius: 50%;
            /*border: 50px solid green;
            border-top-left-radius: 100px 50px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;*/
            /* border-radius: 10px 10px 10px 10px / 20px 20px 20px 20px; */
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

background

紋理、圖案
漸變
雪碧圖動畫
背景圖尺寸適應

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
        }
        .i{
            width: 20px;
            height: 20px;
            background: url(./background.png) no-repeat;
            background-size: 20px 40px;
            transition: background-position .4s;
        }
        .i:hover{
            background-position: 0 -20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="i"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 300px;
            border: 1px solid red;
            background:url(./panda.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;

            /* background-size: cover; */
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

clip-path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 300px;
            border: 1px solid red;
            background:url(./panda.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            padding:10px;
            /* clip-path: inset(100px 50px); */
            /* clip-path: circle(50px at 100px 100px); */
            /* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */
            clip-path: url(#clipPath);
            /* background-size: cover; */
            transition:clip-path .4s;
        }
        .container:hover{
            /* clip-path: circle(80px at 100px 100px); */
        }
    </style>
</head>
<body>
    <div class="container">
        你好，我是熊貓
    </div>
    <svg>
        <defs>
            <clipPath id="clipPath">
                <!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
                <polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
            </clipPath>
        </defs>
    </svg>
</body>
</html>

3D-transform

變換 transform

3D變換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin:50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px;
        }
        #cube{
            width:200px;
            height:200px;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition:transform .4s;
        }
        #cube div{
            width: 200px;
            height:200px;
            position: absolute;
            line-height: 200px;
            font-size:50px;
            text-align: center;
        }
        #cube:hover{
            /* transform: translateZ(-100px) rotateX(270deg); */
            transform: translateZ(-100px) rotateX(90deg) rotateY(90deg);
        }
        .front{
            transform: translateZ(100px);
            /* transform: translateX(100px); */
            /* transform: translateX(100px) translateY(10px) rotate(25deg); */
            /* transform: rotate(25deg) translateX(100px) translateY(10px); */
            background:rgba(255,0,0,.3);
        }
        .back{
            /* transform: translateZ(-100px); */
            transform: translateZ(-100px) rotateY(180deg);
            background:rgba(0,255,0,.3);
        }
        .left{
            transform: translateX(-100px) rotateY(-90deg);
            background:rgba(0,0,255,.3);
        }
        .right{
            transform: translateX(100px) rotateY(90deg);
            background:rgba(255,255,0,.3);
        }
        .top{
            transform: translateY(-100px) rotateX(-90deg);
            background:rgba(255,0,255,.3);
        }
        .bottom{
            transform: translateY(100px) rotateX(90deg);
            background:rgba(0,255,255,.3);
        }

        
    </style>
</head>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>
</html>

補充

如何用一個DIV畫東西

box-shadow無限投影
::before
::after

如何產生不佔空間的邊框

box-shadow
outline

如何實現圓形元素

border-radius:50%

如何實現IOS的圓角圖標

clip-path:(svg)

如何實現半圓、扇形等圖形

border-radius組合:有無邊框，邊框粗細，圓角半徑

如何實現背景圖片居中/不重複/改變大小

background-position

background-repeat

background-size(cover/contain)

如何平移/放大一個元素

transform:translateX(100px)

transform:scale(2)

如何實現3D效果

perspective:500xp

transform-style:preserve-3d

transform: translate rotate...

重學css 0x3 CSS效果