css比较实用技巧

css比较实用技巧

1、给文字添加描边

text-stroke属性为文字添加描边或轮廓
h3{
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}

2、使用图片填充文本

h3{
  background-image: url('images/background.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}

3、自定义光标

html{
  cursor:url('no.png'), auto;
}

4、文字强调标记

h3 {
  text-emphasis: "符号";
}

5、首字母下沉

 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}

6、绘制三角效果

div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}