【CSS】孟加拉共和國國旗

weixin_33895657發表於2017-12-01
7275569-d91cabfaf047368e.png
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


7275569-c257a7d9c4534906.jpg
qrcode_for_gh_6c5c0ec5e65b_258 (1).jpg

相關文章