css实现钢铁材质不锈钢效果
代码语言:html
所属分类:布局界面
代码描述:css实现钢铁材质不锈钢效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, :before, :after { box-sizing: border-box; } html { font: 16px/1.618 "Helvetica Neue", Helvetica, sans-serif; font-weight: 300; } body { padding: 2rem; background: #ddd; } button { position: relative; font-size: 1.5rem; } button.metal { font-weight: 400; text-shadow: rgba(102, 102, 102, 0.5) 0 -1px 0, rgba(255, 255, 255, 0.6) 0 2px 1px; padding: 0 0; line-height: 150px; Xheight: 150px; width: 150px; text-align: center; border: none; background: #aaa; box-shadow: inset #262626 0 0px 0px 4px, inset rgba(38, 38, 38, 0.8) 0 -1px 5px 4px, inset rgba(0, 0, 0, 0.25) 0 -1px 0px 7px, inset rgba(255, 255, 255, 0.7) 0 2px 1px 7px, rgba(0, 0, 0, 0.15) 0 -5px 6px 4px, rgba(255, 255, 255, 0.5) 0 5px 6px 4px; } button.radial { border-radius: 150px; } button.radial:before, button.radial:after { position: absolute; top: 0; bottom: 0; right: 0; left: 0; border-radius: inherit; content: ''; display: block; -webkit-transform: rotate(65deg); transform: rotate(65deg); Xopacity: 0.5; z-index: 1; background-image: -webkit-radial-gradient(50% 0%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(50% 100%, 10% 50%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(0% 50%, 50% 10%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%), -webkit-radial-gradient(100% 50%, 50% 6%, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%); } bu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0