css实现自适应带阴影悬浮背景图文卡片效果代码

代码语言:html

所属分类:响应式

代码描述:css实现自适应带阴影悬浮背景图文卡片效果代码

代码标签: css 自适应 阴影 悬浮 背景 图文 卡片

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">




    <style>
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }
        html {
          background-color: #f0f0f0;
        }
        body {
          color: #999999;
          font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-style: normal;
          font-weight: 400;
          letter-spacing: 0;
          padding: 1rem;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          -moz-font-feature-settings: "liga" on;
        }
        img {
          height: auto;
          max-width: 100%;
          vertical-align: middle;
        }
        .btn {
          background-color: white;
          border: 1px solid #cccccc;
          color: #696969;
          padding: .........完整代码请登录后点击上方下载按钮下载查看

网友评论0