css tips效果

CSS作为网页设计的重要部分，不仅要实现网页布局、字体、颜色等基本功能，还能够制作出各种炫酷的效果。今天我们就来分享一些CSS tips效果，让你的网页更加动感和个性化。

/*给文字添加阴影*/
text-shadow: 2px 2px 2px #000;

/*制作彩虹文字*/
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
background-clip: text;
-webkit-background-clip: text;
color: transparent;

/*利用伪元素来制作三角形*/
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}

/*制作图片边框*/
img {
  border: 6px solid #ddd;
  border-radius: 8px;
}

/*利用Box-shadow制作带有立体感的按钮*/
button {
  background: #4285f4;
  border: none;
  Box-shadow: 0 5px #999;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
}

/*利用transform实现旋转和缩放*/
.rotate {
  transform: rotate(45deg);
}

.scale {
  transform: scale(1.5);
}

除了以上这些，CSS还能实现很多其它酷炫的效果，如动画、过渡、滤镜等。但是，在使用CSS效果的同时，也要注意兼容性和页面性能等实际问题，以打造优秀的用户体验。