CSS知识点精学7-小兔鲜项目实现案例

以下是实现小兔鲜项目中的部分CSS样式代码，展示了如何使用CSS实现背景图片的铺设以及创建一个带有阴影效果的容器：

/* 设置整个页面背景图片，使用linear-gradient为背景图片上添加一层半透明的黑色遮罩 */
body {
  background-image: url('../images/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: multiply;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg.jpg');
}
 
/* 创建一个带阴影的登录框容器 */
.login-container {
  width: 300px;
  margin: 100px auto 0;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
/* 设置登录框的标题样式 */
.login-container h2 {
  text-align: center;
  margin: 0 0 20px;
}
 
/* 设置输入框的样式 */
.login-container input[type="text"], .login-container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
}
 
/* 设置登录按钮的样式 */
.login-container button {
  width: 100%;
  padding: 10px;
  background-color: #5cb85c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
 
/* 设置登录链接的样式 */
.login-container a {
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
  color: #5cb85c;
}

这段代码展示了如何使用CSS背景属性来设置背景图片，以及如何使用盒模型属性来设计一个登录框的布局和样式，包括阴影效果的添加。这些技术是现代网页设计中常用的，对于学习网页设计和开发是非常有帮助的。