想必大家对border-radius都不陌生,圆角嘛,经常用来做效果,今天的话会拓展一下这个border-radius的应用----做一个杯子小demo。
效果图如下:
1、html部分:
<body>
<div class="cup">
<div class="handle"></div>
</div>
</body>
2、css部分:
<style>
.cup {
width: 240px;
height: 360px;
background-color: black;
margin-left: 200px;
position: relative;
margin-top: 150px;
box-shadow: 0px 0px 180px gray inset;
}
.handle {
width: 120px;
height: 180px;
position: absolute;
/* background-color: black; */