纯css绘制三维立体球形阴影效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制三维立体球形阴影效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: linear-gradient(#1E88E5 0%, #1565C0 100%) no-repeat; height: 100vh; margin: 0; } .main-orb { background: linear-gradient(#fff 0%, #eee 10%, #2E86FB 50%, #1A237E 100%); border-radius: 9999px; height: 400px; margin: 4rem auto; position: relative; width: 400px; } .main-orb:before, .main-orb:after { border-radius: 200px 200px 9999px 9999px; bottom: -10px; content:''; filter: blur(20px); height: 40px; position: absolute; z-index: -1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0