css揭祕筆記——形狀

自適應的橢圓（border-radius的用法）

單獨指定水平和垂直半徑

長寬固定的元素，能夠經過指定寬高的一半，變爲橢圓形，格式爲兩個值用/分開。

width: 100px; 
height: 80px; 
border-radius: 50px/40px;
background: orange;

效果以下：

百分比值

寬高不固定的元素，還能夠經過指定百分比值來實現自適應橢圓的效果。

border-radius: 50%/50%;

還能夠簡寫爲

border-radius: 50%;

### 爲每一個角指定不一樣的值

border-radius的展開屬性爲：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

也能夠直接簡寫：
border-radius： [top-left-horizon] [top-right-horizon] [bottom-right-horizon] [bottom-left-horizon] / [top-left-vertical] [top-right-vertical] [bottom-right-vertical] [bottom-left-vertical]

固然，各個值也能夠省略，1~4個都可，會以CSS常規方法重複。

利用這個特性，就能夠實現半個橢圓或四分之一個橢圓的效果。

border-radius:50%/ 100% 100% 0 0;

border-radius:100% 0 0 100%/ 50%;

border-radius:100% 0 0;

平行四邊形

形變，用transform: skewX(-45deg)，能夠獲得平行四邊形，可是，元素中的字體也會跟着形變，就像這樣：

添加一個標籤，使用嵌套的方案，並非很好的方法。

能夠選擇僞元素的方式：

.button{
    position: relative;
    
}
.button::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: orange;
    transform: skewX(-45deg);
    z-index: -1;
}

這種方法，能夠應用在想變形一個元素而不想變形它的內容的場景。

把skew改爲rotate，就變成了這樣：

實現邊框內圓角

.inner-radius{
    position: relative;
    border-radius: 20px;
    background: white;
}
.inner-radius::before{
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    background: orange;
    z-index: -1;
}

多重邊框

.borders{
    position: relative;
    border: 2px dashed orange;
}
.borders::before{
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
    border: 2px dashed green;
    z-index: -1;
}

還有IE8下實現多重背景、爲某一層「背景」單獨設置相似opacity這樣的屬性等等。

菱形圖片

基於變形的方案

<div class="picture">
    <img src="./image/girl.jpg" alt="girl">
</div>

.picture{
    width:300px;
    transform: rotate(45deg); 
    overflow: hidden;
}
.picture>img{
    transform: rotate(-45deg) scale(1.42);
}

可是這種方法須要一個多餘的div，而且對正方形的圖片比較適用。下面的方法很是適應非正方形的圖片。

基於裁切路徑方案

/*直接在img元素上應用該屬性，將圖片裁切成想要的樣子，用多邊形函數polygon()指定一個菱形*/
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

還能夠將clip-path參與到過渡動畫。（動畫須要在同一種形狀函數，而且點相同）

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

這樣就有了鼠標懸停時，圖片擴展爲原來的形狀和大小。

切角效果

直切角

background: 
    linear-gradient(45deg, transparent 15px, orange 0) left bottom,
    linear-gradient(-45deg, transparent 15px, orange 0) right bottom,
    linear-gradient(135deg, transparent 15px, orange 0) left top,
    linear-gradient(-135deg, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

注意，這個角度讓我一度很困惑，它是這樣的：

參考： 張鑫旭-深刻理解CSS3 gradient斜向線性漸變

弧形切角

把線性漸變改成徑向漸變，就變成了內凹圓角。

background: 
    radial-gradient(circle at left bottom, transparent 15px, orange 0) left bottom,
    radial-gradient(circle at right bottom, transparent 15px, orange 0) right bottom,
    radial-gradient(circle at left top, transparent 15px, orange 0) left top,
    radial-gradient(circle at right top, transparent 15px, orange 0) right top;
background-size: 50% 50%;
background-repeat: no-repeat;

裁切路徑方案

background: orange;
clip-path: polygon(20px 0, calc(100%-20px) 0, 100% 20px, 100% calc(100% -20px), calc(100% - 20px) 100%, 20px 100%,0 calc(100% - 20px), 0 20px);

這種方案，當內邊距不夠寬時，會裁切掉文本。由於它是對整個元素進行裁切。

深刻了解clip-path polygon，戳這裏

梯形標籤

使用3D形變，以x軸旋轉，造成梯形的效果。爲了不標籤中的字體也變形，還使用「平行四邊形」實現方式（僞元素）。

.tab{
    position: relative;
    text-align: center;
    line-height: 30px;
}
.tab::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform-origin: bottom; /*以元素底邊旋轉，底邊和原元素底部等長。（默認以中軸線旋轉，元素大小容易不受控制）*/
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg); /*旋轉後，比原元素矮了，在Y軸方向上拉伸至原來的長度。（儘可能不改變原元素，保證回退後的效果）*/
    background-color: orange;
    z-index: -1;
}

這種方式很容易添加其餘樣式，如，在僞元素中加入如下樣式：

background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;

就變成了這個樣子：