【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