CSS中的各種形狀

1.圓和橢圓

圓和橢圓

圓和橢圓主要還是利用border-radius屬性，單位的話可以使用具體長度，也可以用百分比，當border-radius的長度是box的邊長一半的時候，就可以形成一個橢圓，如果box的長寬相同的話就是一個正圓。

.circle div{
    height: 100px;
    width: 100px;
    margin-right: 20px;
    background: rgb(21, 140, 252);
}
#circle_1{  
    border-radius: 100px;
}
#circle_2{
    width:150px;
    border-radius: 50%;
    /* background: rgb(4, 175, 110); */
}

半圓和四分之一圓

想象一下，半圓其實就是同側的兩個角是圓的，另一側兩個角還是尖的,所以像這樣？

#circle_3{
    border-radius: 50% 50% 0 0;
}

這是因爲我們只是改變了正方形左右兩角的弧度，即正方形的上半身，這個時候就要了解border-radius裏水平半徑和垂直半徑的屬性了

border-radius:100px/75px;

表示這個box的四個角的水平半徑是100px，垂直半徑是75px；意味着四個角是橢圓的四分之一圓弧，要造一個半圓：
頂部邊緣並沒有平直的部分（也就是說，整個頂邊都是曲線），這意味着
左上角和右上角的半徑之和應該等於整個形狀的寬度；
左半徑和右半徑在水平方向上的值應該均爲 50%；
垂直方向，似乎頂部的兩個圓角佔據了整個元素的高度，而且底部完全沒有任何圓角。因此，在垂直方向上 border-radius 的合理值似乎就是 100% 100% 0 0。
所以：

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

四分之一就相對好理解了，只要一個角半徑是100%，其他角不變就行了：

border-radius: 100% 0 0 0;

2.三角形

三角形的實現原理是好多前端面試都會遇到的問題，這裏當然會把這個典型的css的形狀放進來。
具體的css代碼：

#triangle_1{
    width: 0;
    height: 0;
    margin-top: 20px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid rgb(8, 240, 189);
}

其實只要記住div的四條邊框是同等地位的，所以當一個div沒有長寬，那麼它所佔的的面積就是邊框的面積，所以我們可以看一下這兩張圖：

所以再看一下css，就能很簡單的理解了其中的理解，之所以不容易想到是因爲三角形其實不是div的面積，而是div邊框的粗細。

3.四邊形

四邊形主要就是菱形，平行四邊形：
平行四邊形進行一個方向的傾斜就可以；
菱形保持四條邊相等，box旋轉45度後進行transfor的縱向或者橫向拉伸；
兩種都利用了transform屬性。

#quardangle_1{
        transform: skew(-45deg);
}
#quardangle_1>p{
    transform:skewX(45deg);
}
#quardangle_2{
    transform: rotate(45deg);
}
#quardangle_3{
    transform: skewX(30deg);
    transform: scaleY(0.5) rotate(45deg) ;/* 先作用後面的，再作用前面的 */
}

順帶附上css中transform中的屬性值：

值	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y)	定義 2D 轉換。
translate3d(x,y,z)	定義 3D 轉換。
translateX(x)	定義轉換，只是用 X 軸的值。
translateY(y)	定義轉換，只是用 Y 軸的值。
translateZ(z)	定義 3D 轉換，只是用 Z 軸的值。
scale(x,y)	定義 2D 縮放轉換。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	通過設置 X 軸的值來定義縮放轉換。
scaleY(y)	通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z)	通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿着 X 軸的 3D 旋轉。
rotateY(angle)	定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle)	定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle)	定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle)	定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n)	爲 3D 轉換元素定義透視視圖。

4.切角

切角利用的是線性漸變和徑向漸變的屬性，原理就是在box的四個角上利用透明到實色的漸變。

#corner_1{
    background: linear-gradient(135deg, transparent 15px, rgb(204, 30, 30) 0)
                top left,
                linear-gradient(-135deg, transparent 15px, rgb(204, 30, 30) 0)
                top right,
                linear-gradient(-45deg, transparent 15px, rgb(204, 30, 30) 0)
                bottom right,
                linear-gradient(45deg, transparent 15px, rgb(204, 30, 30) 0)
                bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    }
#corner_2{
    background: radial-gradient(circle at top left, transparent 30px, rgb(204, 30, 30) 0)
                top left,
                radial-gradient(circle at top right, transparent 30px, rgb(204, 30, 30) 0)
                top right,
                radial-gradient(circle at bottom right, transparent 30px, rgb(204, 30, 30) 0)
                bottom right,
                radial-gradient(circle at bottom left, transparent 30px, rgb(204, 30, 30) 0)
                bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

隨後奉上一個能顯示背景的打孔效果的卡券：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />  
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
<title>Stamp Demo</title>  
<style> 
body{
    background-image: linear-gradient(90deg, #ee0, #0ee); 
}
.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
} 
.wrapper{
    height: 667px;
    background-image: linear-gradient(90deg, #ee0, #0ee); 
}
/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,white 50%);
}
/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,white 50%);
}
/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,white 50%);
}
/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,white 50%);
}
.middle{
    width: 159px;
    height: 200px;
    background: white;
}
.top{
    width: 100%;
    height: 200px;
    background: #fff;
}
.bottom{
    width: 100%;
    height: 200px;
    background: #fff;
}
</style>  
</head>  
<body>
    <div class="wrapper">
        <div class="top"></div>
        <div class='container'>
            <div class="left">
                <div class='raidal4'></div>
                <div class='raidal1'></div>
            </div>
            <div class="middle">
            </div>
            <div class="right">     
                <div class='raidal3'></div>  
                <div class='raidal2'></div> 
            </div> 
        </div>  
        <div class="bottom"></div>
    </div>
</body>  
</html>

CSS中的各種形狀

1.圓和橢圓

圓和橢圓

半圓和四分之一圓

2.三角形

3.四邊形

4.切角

開源高性能結構化日誌模塊NanoLog

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

《ES6標準入門》:字符串擴展

重拾java（一）：數據類型

CSS中的各種形狀

《ES6標準入門》:變量的解構賦值

CSS中的定位佈局

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結