CSS倒影效果实现：圆角、阴影、背景图片、文字倒影

本文将介绍利用CSS实现倒影效果的几种方法，包括圆角边框、盒子阴影、背景图片、文字倒影等，并提供完整的代码示例和解释。

1. 设置圆角边框，盒子阴影

<div class='login'>
  <p>用户名</p>
  <p><input type='text' /></p>
  <p>密&nbsp;&nbsp;码</p>
  <p><input type='password' /></p>
  <p>
    <a href='#'><img class='btn' src='reg.jpg' /></a>
    <a href='#'><img class='btn' src='foundp.jpg' /></a>
    <a href='#'><img class='btn' src='login.jpg' /></a>
  </p>
</div>

.login {
  width: 241px;
  background-color: #d2d2b4;
  border-radius: 5px;
  box-shadow: 5px 5px 5px gray;
  padding: 10px;
  margin-bottom: 50px;
}

.login p {
  margin: 5px 0 5px 5px;
  font-size: 14px;
  font-weight: 700;
}

input {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  border: none;
  padding: 5px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 2px gray;
}

.btn {
  padding: 5px 10px;
  background-color: #ccc;
  border-radius: 5px;
  border: none;
  margin-right: 10px;
  box-shadow: 2px 2px 2px gray;
}

.btn:hover {
  background-color: #aaa;
  cursor: pointer;
  box-shadow: 1px 1px 1px green;
}

2. 设置背景图片，边框图片

<div id='bor'>
  <img src='goddess.jpg'>
</div>

#bor {
  height: 280px;
  width: 280px;
  border: solid 30px blue;
  border-image: url(border.png);
  border-image-slice: 33%;
  border-image-repeat: repeat;
  margin-bottom: 50px;
}

3. 设置文字倒影

<div id='text'>
  <h1>《雨巷》--- 戴望舒</h1>
  <p>撑着油纸伞，独自<br />
    彷徨在悠长、悠长<br />
    又寂寥的雨巷<br />
    我希望逢着<br />
    一个丁香一样地<br />
    结着愁怨的姑娘
  </p>
</div>

#text {
  margin-bottom: 300px;
  -webkit-box-reflect: below 10px;
  border: solid 5px;
  padding: 10px;
  box-shadow: 5px 5px 5px gray;
}

4. 设置图片倒影

<img id='fj' src='fj.jpg' />

#fj {
  margin-bottom: 300px;
  -webkit-box-reflect: below 10px linear-gradient(0deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
  box-shadow: 5px 5px 5px gray;
}

总结

通过以上方法，可以轻松实现各种CSS倒影效果，为网页增添视觉上的趣味性和层次感。