我写CSS的常用套路(附demo的效果实现与源码）

CSS是一种用于描述网页样式的语言，它可以控制网页中文本、图片、链接等元素的显示样式。以下是一些常用的CSS样式套路以及它们的实现方法：

1. 文字阴影：

.shadowed-text {
  text-shadow: 2px 2px 2px #888888;
}

2. 背景渐变：

.gradient-background {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

3. 圆角边框：

.rounded-border {
  border: 2px solid #555555;
  border-radius: 10px;
}

4. 圆形图片：

.circle-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

5. 圆角按钮：

.rounded-button {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #555555;
  color: white;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}

6. 圆角边框的悬浮效果：

.rounded-border:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

这些是一些基本的CSS样式套路，可以应用于各种网页元素来增强用户界面的视觉效果。在实际开发中，可以根据需要自由组合和修改这些样式。