猛男甜系css挑战（结尾有作业）

2021-11-28 153 阅读1分钟

如图，背景上的几个dom挺好看的，不过可惜是图片，接下来用原生dom+css模仿一下

解题

border-radius实现圆形
background-color背景色搭配border-shadows内外阴影

简简单单拿捏🤏

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .round {
            background-color: #f8f6e1;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            box-shadow: 0px 21px 33px 5px #f0d5ca, 1px -24px 29px -12px inset #ed6866;
        }
    </style>
</head>
<body>
    <div class="round"></div>
</body>
</html>

预览

三角形、半圆形留给各位大佬当作业