css小技巧

1.伪类选择器用来指定元素第一个字符的样式

<div id="app">hello world!</div>

#app::first-letter{
  color: red;
  font-size: 25px;
  text-transform: uppercase;  //字母大写
}

效果：

 2.给透明图片添加阴影

<img class="drop-shadow" src="https://assets.codepen.io/85648/cat-logo.svg" alt="cat logo" />

.drop-shadow {
    filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}

效果：

 3.镂空文字

<p>HELLO WORD</p>

//因为text-stroke不是标准属性, 大多数情况要加上前缀
p{
  font-size: 28px;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 1.5px #198CE6; 
}

效果：

 

 4.背景文字

<div>hello world</div>

//规定背景的绘制区域，再把文字颜色设置为透明实现
div{
    background-image:url(https://img0.baidu.com/it/u=2772029697,2839972417&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=466);
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip : text;
    color: transparent;
    font-size: 3.8em;
    width: fit-content;
}

效果：

5.填充文字效果

<a href="#">home</a>

a{
  font-size: 50px;
  text-decoration: unset;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #198CE6;
  background: linear-gradient(#198CE6 0 100%) left / 0 no-repeat;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  transition: .5s linear;
  &:hover{
    background-size: 100%;
  }
}

 效果：

6.网页灰度效果（黑白图片） 

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201911%2F26%2F20191126203636_nMTMZ.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675324666&t=1deeea38ca5c6572bd810153558a1882" alg="test"/>

img{
  width: auto;
  height: 100vh;
}
img:hover{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

效果：

 7.justify-content设置为space-between实现两端对齐效果，最后一行左对齐

<div class="wrapper">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

.wrapper{
  width: 80vw;
  height: 90vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  border: 1px solid #333;
}
.box{
  width: 22%;
  height: 60px;
  margin-bottom: 1em;
  background-color: rgb(154, 199, 241);
}
/* 如果最后一行是3个元素 */
.box:last-child:nth-child(4n - 1) {
    margin-right: 26%;
}
/* 如果最后一行是2个元素 */
.box:last-child:nth-child(4n - 2) {
    margin-right: 52%;
}

效果：

 8.文字不换行、自动换行、强制换行

//不换行
.wrap {
  white-space:nowrap;
}
//自动换行
.wrap {
  word-break: break-word;
  white-space: normal;
}
//强制换行
.wrap {
  word-break:break-all;
}