嵌入式菜单栏

通过CSS3阴影模拟的有嵌入感的按钮

shadow,menu

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2065
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background: #333;
  text-align: center; }

#container {
  display: inline-block;
  padding: 5px;
  margin: 60px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(255, 255, 255, .1);
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(255, 255, 255, .1);
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.4), 0px 1px 1px 0px rgba(255, 255, 255, .1);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

#container ul {
  padding: 0;
  height: 40px;
  margin: 0;
  list-style: none;
  overflow: hidden;
  -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, .2), 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, .2), 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, .2), 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  background: #5c6063;
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.3)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000',GradientType=0);
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px; }

#container ul li {
  background: rgba(255, 255, 255, 0.0);
  float: left;
  text-align: center;
  border-right: 1px solid #666;
  border-left: 1px solid #444;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease; }

#container ul li:hover {
  background: rgba(255, 255, 255, 0.08); }

#container ul li:active {
  background: rgba(0, 0, 0, 0.08); }

#container ul li:first-child {
  border-left: none;
  -webkit-border-radius: 100px 0 0 100px;
  -moz-border-radius: 100px 0 0 100px;
  border-radius: 100px 0 0 100px; }

#container ul li:last-child {
  border-right: none;
  -webkit-border-radius: 0 100px 100px 0;
  -moz-border-radius: 0 100px 100px 0;
  border-radius: 0 100px 100px 0; }

#container ul li a {
  text-decoration: none;
  font: 11px/41px Arial, sans-serif;
  color: #ddd;
  text-transform: uppercase;
  text-shadow: 0px 1px rgba(0, 0, 0, 0.5);
  padding: 35px; }

HTML

通过CSS3阴影模拟的有嵌入感的按钮

shadow,menu

编辑器支持Emmet

快捷键

通过CSS3阴影模拟的有嵌入感的按钮

shadow,menu

一款响应式双场景Bootstrap4网页模板（带头部菜单栏滚动动画）

CSS3折纸展开样式的菜单动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：