CSS 3 快速入門 By 彭彭

➀ CSS3 快速入門

1.1 關於 W3C 技術規格的定制和實踐
w3c:http://w3schools.wang/
caniuse: https://caniuse.com/

1.2 簡單的常用設定介紹
opacity 透明度
border-radius 圓角
box-shadow 陰影
text-shadow 文本陰影

qiita.rb

    <style type = "text/css">
        .box {
            width: 250px; height: 150px; background-color: pink;
            opacity: 1;
            border-radius: 10px;
            box-shadow: 7px 7px 0 #C0C0C0;
            text-shadow: 2px 0 0 #ffffff;
        }
    </style>

➁ CSS3 綫性轉換
2.1 位移，縮放，旋轉，歪斜

qiita.rb

    <style type = "text/css">
        .box {
            width: 100px; height: 100px; background-color: pink;
            transform: 位移 translate(100px, 50px)
            transform: 縮放 scale(2.5, 1)
            transform: 旋轉 rotate(50deg)
            transform: 歪斜 skew(0deg, 30deg)         
            transform: translate(100px, 50px) rotate(45deg);
        }
    </style>

2.2 使用綫性轉換畫一個在平面上的立方體

qiita.rb

     /* CUBE 立方體 */
     <style type= "text/css">
        .cube > .top {
            width: 240px; height: 60px; background-color: #dddddd;
            transform: skew(-45deg, 0deg) translate(30px,0px)
        }
        .cube > .center {
            width: 240px; height: 240px; background-color: #aaaaaa;
            display:inline-block;
        }
        .cube > .right {
            width: 60px; height: 240px; background-color: #888888;
            display: inline-block;
            transform: skew(0deg, -45deg) translate(0px,-30px)
        }
    </style>