CSS3:网页变美指南

在这个例子中，我们将使用CSS3的一些特性来改善一个简单的网页布局。这里的目标是使用CSS3的动画、渐变和边框效果来增强页面的视觉效果。

/* 设置页面背景为渐变色 */
body {
  background: linear-gradient(to right, #FFB7CE, #FFA79D);
}
 
/* 设置页面中心内容区的样式 */
.content {
  width: 80%;
  margin: auto;
  padding: 50px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
 
/* 设置标题的动画效果 */
h1 {
  color: #333;
  font-size: 3em;
  text-align: center;
  animation: glow 1s ease infinite alternate;
}
 
/* 定义动画 */
@keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #ff00de, 0 0 110px #ff00de;
  }
}
 
/* 设置链接的边框 */
a {
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ff00de;
  margin: 0 10px;
}
 
/* 当鼠标悬停在链接上时，改变边框颜色 */
a:hover {
  border-color: #ff00de;
}

这段CSS代码为一个简单的HTML页面添加了视觉吸引力。它使用渐变背景、边框动画、文本阴影效果以及鼠标悬停效果，为页面提供了更好的视觉体验。