css揭秘-笔记02

知识点：

　　1 border-radius 有一个鲜为人知的真相：它可以单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值即可

　　   其实，border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。

　　   这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。

　　　这意味着相同的百分比可能会计算出不同的水平和垂直半径。

　　　　border-radius: 50% / 50%;//创建一个自适应的椭圆
　　　　border-radius: 50%;

　　2 平行四边形

　　　　通过skew() 的变形属性来对这个矩形进行斜向拉伸

　　　　.button {
　　　　　　position: relative;
　　　　　　/* 其他的文字颜色、内边距等样式…… */
　　　　}
　　　　.button::before {
　　　　　　content: ''; /* 用伪元素来生成一个矩形 */
　　　　　　position: absolute;
　　　　　　top: 0; right: 0; bottom: 0; left: 0;
　　　　　　z-index: -1;
　　　　　　background: #58a;
　　　　　　transform: skew(45deg);
　　　　}

　　　　这个技巧不仅对skew() 变形来说很有用，还适用于其他任何变形样式，
　　　　当我们想变形一个元素而不想变形它的内容时就可以用到它

　　3 菱形图片

        .picture {
             400px;
            transform: rotate(45deg);
            overflow: hidden;
        }
        .picture > img {
            max- 100%;
            transform: rotate(-45deg) scale(1.42);
        }

　　　　polygon() 使用polygon()（多边形）函数来指定一个菱形。实际上，它允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形。

　　　　我们甚至可以使用百分比值，它们会解析为元素自身的尺寸

    img {
        clip-path: polygon(50% 0, 100% 50%,
        50% 100%, 0 50%);
        transition: 1s clip-path;
    }
    img:hover {
        clip-path: polygon(0 0, 100% 0,
        100% 100%, 0 100%);
    }                

　　4 切角效果

　　　　第一种方案来自于无所不能的CSS 渐变。假设我们只需要一个角被切掉的效果，
　　　　以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度（比如45deg）作为方向，
　　　　而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。

        background: #58a;
        background:
            linear-gradient(-45deg, transparent 15px, #58a 0);

　　　　很简单，对吧？你可以在图3-25 中看到结果。事实上，第一行声明
　　　　并不是必需的，加上它是将其作为回退机制：如果某些浏览器不支持CSS
　　　　渐变，那第二行声明会被丢弃，而此时我们至少还能得到一个简单的实色背景

        border: 20px solid transparent;
        border-image: 1 url('data:image/svg+xml,
        <svg xmlns="http://www.w3.org/2000/svg"
        width="3" height="3" fill="%2358a">
        <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>
        </svg>');
        background: #58a;
        background-clip: padding-box;

　　5 饼图

        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            border-radius: 0 100% 100% 0 / 50%;
            background-color: inherit;
            transform-origin: left;
        }

　　6 居中

　　　　在CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，
　　　　就对它的父元素应用text-align: center；如果它是一个块级元素，就对
　　　　它自身应用margin: auto。

        main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);/*translate是移动属性，两个-50%代表着像原始位置向左、向上各移动50%*/ 
　　　　}

　　　　margin 的百分比值是以父元素的宽度作为解析基准的。没错，即使对于margin-top 和margin-bottom 来说也是这样！

„ 　　　  vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的1%，而不是100%。

„ 　　　　与vw类似，1vh表示视口高度的1%。
„ 　　　　当视口宽度小于高度时，1vmin等于1vw，否则等于1vh。
„ 　　　　当视口宽度大于高度时，1vmax等于1vw，否则等于1vh。

        main {
             18em;
            padding: 1em 1.5em;
            margin: 50vh auto 0;
            transform: translateY(-50%);
        }

　　　　　　这个技巧的实用性是相当有限的，因为它只适用于在视口中居中的场景。