单个div+css布局实现一个盒装柠檬汽水的效果代码-html代码-BFW代码库

单个div+css布局实现一个盒装柠檬汽水的效果代码

代码语言：html

代码描述：单个div+css布局实现一个盒装柠檬汽水的效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>


  
  
<style>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(lightblue), color-stop(50%, #5fb3ce), color-stop(50%, rgba(0, 0, 0, 0.0001))), radial-gradient(circle at center, #e9b759, wheat 50%);
  background: linear-gradient(to bottom, lightblue, #5fb3ce 50%, rgba(0, 0, 0, 0.0001) 50%), radial-gradient(circle at center, #e9b759, wheat 50%);
}
body div {
  width: 200px;
  height: 600px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0001), rgba(0, 0, 0, 0.25)) 0px 150px/150px 250px no-repeat, radial-gradient(ellipse at center, #636363, #898989 2.5px, rgba(0, 0, 0, 0.0001) 3px) 0px 33px/10px 20px no-repeat, linear-gradient(to bottom, #d6d6d6, #efefef 12.5px, rgba(0, 0, 0, 0.0001) 12.5px) 2.5px 37.5px/15px 30px no-repeat, radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.0001) 25px, #efefef 25px, #d6d6d6 37.5px, rgba(0, 0, 0, 0.0001) 37.5px) 18px -100px/175px 175px no-repeat, linear-gradient(to right, #efefef, #d6d6d6 12.5px, rgba(0, 0, 0, 0.0001) 12.5px) 42.5px 70px/100px 70px no-repeat, radial-gradient(ellipse at center, black, #664200 10px, rgba(0, 0, 0, 0.0001) 5px) 40px 130px/20px 10px no-repeat, radial-gradient(ellipse at center, rgba(0, 0, 0, 0.0001) 8px, #f29d00 13px, rgba(0, 0, 0, 0.0001) 17.5px) 32.5px 127.5px/35px 17.5px no-repeat, radial-gradient(circle at center, orange 7.5px, rgba(0, 0, 0, 0.0001) 5px, rgba(0, 0, 0, 0.0001) 35px, orange 35px, orange 45px, yellow 45px, yellow 55px, #e69500 55px) 0px 150px/150px 250px no-repeat, linear-gradient(to right, orange 3px, rgba(0, 0, 0, 0.0001) 3px) 72.5px 200px/150px 150px no-repeat, linear-gradient(to bottom, orange 3px, rgba(0, 0, 0, 0.0001) 3px) 0px 272.5px/150px 150px no-repeat, linear-gradient(45deg, rgba(0, 0, 0, 0.0001) 100px, orange 100px, orange 103px, rgba(0, 0, 0, 0.0001) 103px) -43.5px 100px/200px 200px no-repeat, linear-gradient(-45deg, rgba(0, 0, 0, 0.0001) 100px, orange 100px, orange 103px, rgba(0, 0, 0, 0.0001) 103px) -110px 102px/250px 250px no-repeat, radial-gradient.........完整代码请登录后点击上方下载按钮下载查看