【CSS】孟加拉共和國國旗

image.png

HTML程式碼：
<div class="dd1"></div>

方法1 CSS程式碼：

.dd1 {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .25);

    background-image: radial-gradient(circle at 150px 100px, #f42a41 65px, #006a4e 65px)
}

方法2 CSS程式碼：

.dd1 {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .25);

    background-image: radial-gradient(circle closest-side, #f42a41 66%, #006a4e 66%);
}

方法3 CSS程式碼：

.dd1 {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .25);

    background-image: -webkit-gradient(radial, 150 100, 0, 150 100, 66, color-stop(0.98, #f42a41), color-stop(0.99, #006a4e));
}

方法3是針對Webkit引擎的老式寫法，不必掌握。

背景色筆記

漸變背景

希望以上筆記對大家有幫助。
我的其他筆記在微信公眾號：Rabbit_svip

qrcode_for_gh_6c5c0ec5e65b_258 (1).jpg