css 半圆效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .div1{

            width: 50px;

            height: 50px;

            background-color: #239285;

            margin: 30px;

        }

        .div2{

            width:100px;

            height: 50px;

            background-color: #239587;

            border-radius: 50px 50px 0 0;

        }

        .div3{

            width: 50px;

            height: 100px;

            background-color: #231587;

            border-radius: 0 50px 50px 0;

        }

        .div4{

            width: 100px;

            height: 50px;

            background-color: #219587;

            border-radius: 0 0 50px 50px;

        }

        .div5{

            width: 50px;

            height: 100px;

            background-color: #239597;

            border-radius: 50px 0 0 50px;

        }

    </style>

</head>

<body>

<div class="div1"></div>

<div class="div2"></div>

<div class="div3"></div>

<div class="div4"></div>

<div class="div5"></div>

</body>

</html>
巴特西

css 半圆效果

最新文章

热门文章
