雪花

1.图片底部圆弧

一、效果图

 border-radius分别指定各个角弯曲程度

二、粘贴复制

<!DOCTYPE HTML>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        html,
        body {
            width: 100%;
        }
        .box {
            width: 480px;
             margin:100px auto;
        }
        img{
            width:480px;
            height:300px;
            border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%;
                         
        }
        /* border-radius的常规用法我就不说了，这里就讲解一下上面那几个参数指的是什么；前面的是水平半径；后面的是垂直半径*/
    </style>
</head>
 
<body>
    <div class="box">
        <img src="http://img5.imgtn.bdimg.com/it/u=2230167403,4188800858&fm=26&gp=0.jpg" alt="">
    </div>
</body>
 
</html>

 

posted @ 2019-01-19 10:15  十色  阅读(433)  评论(0)  编辑  收藏  举报