You don't know css(2)

1. 平行四邊形

• 效果

  

• 程式碼

<div id="app"></div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
複製程式碼

這就是平行四邊形，你以為這就完成了嗎？不，我們加上幾個字看看。

發現了什麼？ 我可是沒有使用font-style: italic

• 因為外面的圖形skew(-30deg),所以裡面的字也skew(-30deg)，所以我們看到的字型是傾斜的。

• 那我們怎麼解決呢？

  • 再新增一個元素,然後裡面的元素反向skew(30deg),字型就正過來了。

    

<div id="app">
    <div>Code Xiu 平行</div>
</div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
div {
    transform: skew(30deg);
}
複製程式碼

• 偽元素

<div id="app"></div>
#app {
    width: 200px;
    height: 100px;
    background-color: #165;
    transform: skew(-30deg);
}
#app:after {
    display: inline-block;
    content: "Code Xiu 平行";
    transform: skew(30deg);
}
複製程式碼

2. 旋轉的橢圓

• 效果

• 程式碼

<div id="app">掘金</div>
@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}
#app {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #165;
    animation: rotate360 2s linear infinite;
}
複製程式碼

我們看到字型（裡面的元素）也跟著旋轉，那麼我們怎麼解決呢？

• 新增另一個元素反向旋轉

  

<div id="app">
    <div>轉</div>
</div>
@keyframes rotate360 {
    to {
        transform: rotate(360deg);
    }
}
@keyframes rotate_360 {
    to {
        transform: rotate(-360deg);
    }
}
#app {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #165;
    animation: rotate360 5s linear infinite;
}
div {
    animation: rotate_360 5s linear infinite;
}
複製程式碼

• 偽元素

<div id="app"></div>
#app:before {
    content: "轉";
    display: inline-block;
    animation: rotate_360 5s linear infinite;
}
複製程式碼

3. 毛玻璃

• 效果

  

• 程式碼

<div id="app">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sequi in doloremque, debitis obcaecati alias sed reprehenderit necessitatibus incidunt, amet! Reprehenderit tempora quos ipsa libero suscipit eveniet, quidem, nesciunt expedita?
    </div>
</div>
#app {  //最外層父容器
    display: flex;
    align-items: center;
    justify-content: center;
    width: 402px;
    height: 300px;
    z-index: -1;
    background-image: url("./pic/1.png");
    background-size: cover;
    background-position: center; 
}
複製程式碼

讓裡面的元素在父元素中垂直居中顯示。

.text {
    position: relative;
    width: 300px;
    height: 250px;
    overflow: hidden;  // 超出部分隱藏和下面的margin相對應
}
複製程式碼

利用偽元素佔滿父元素，再讓偽元素的背景和父元素的一樣，在模糊背景。

.text:before {  
    content: '';
    position: absolute;//讓偽元素沾滿父容器
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1; //讓文字顯示出來
    filter: blur(20px); //模糊程度，自己根據情況指定
    margin: -30px;  // 如果沒有這個屬性請看下面的效果圖
    background-image: url("./pic/1.png"); //和外面使用同一張圖片
    background-repeat: no-repeat;
    background-position: center;
}
複製程式碼

如果沒有margin: -30px

使用負的margin（大小自己根據情況指定，只要能一致就行）來讓容器擴大，這樣就能顯示一致的模糊度了。 4. 菱形圖片

• 效果

  

  你是不是看著很簡單，很容易實現。
• 程式碼

<div id="app">
    <img src="./pic/1.png" alt="菱形圖片">
</div>
#app {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    transform: rotate(45deg); 
}
複製程式碼

旋轉後的效果

這個可不是我們想要的效果。 那我們怎麼做呢？就是前面介紹過的父容器正著轉，子容器反著轉。

#app {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    transform: rotate(45deg); 
    overflow: hidden;
}
img {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg); 
}
複製程式碼

變成這樣

這距離我們最終的效果還差一點，怎麼辦？我們都知道有一個屬性來放大元素。

img {
    width: 100%;
    height: 100%;
    transform: rotate(-45deg) scale(1.5); //修改後的 scale的數值自己指定
}
複製程式碼

5. 缺角效果

• 效果

  

• 程式碼

#app {
    width: 200px;
    height: 200px;
    background-color: #515;
    background-image: linear-gradient(-45deg, white 10px, transparent 0); //缺角
}
複製程式碼

6. 內圓角

• 效果

  

• 程式碼
  • 方式一 兩個元素

<div id="app">
    <div class="inner"></div>
</div>
#app {
    width: 200px;
    height: 200px;
    background-color: orange;
    border: 10px solid orange;
}
.inner {
    width: 200px;
    height: 200px;
    background-color: #661;
    border-radius: 10px;
}
複製程式碼

• 方式二 一個元素

<div id="app"></div>
#app {
    width: 200px;
    height: 200px;
    background-color: brown;
    border-radius: 10px;
    outline: 10px solid orange;
}
複製程式碼

這樣中間有空白，我們可以用box-shadow來填補空白

#app {
    width: 200px;
    height: 200px;
    background-color: brown;
    border-radius: 10px;
    box-shadow: 0 0 0 10px orange;  //新增的程式碼
    outline: 10px solid orange;
}
複製程式碼

我們只要換個和邊框顏色一樣的顏色就可以了。