实用CSS片段
弧形盒子（背景）
/* 弧形背景 */
.topBox {
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
padding: 60rpx 20rpx 20rpx;
box-sizing: border-box;
}
.topBox::after {
content: "";
width: 140%;
height: 200px;
position: absolute;
left: -20%;
top: 0;
z-index: -1;
border-radius: 0 0 50% 50%;
background: #00aaff;
}
/* 弧形背景 */这个效果一般用于轮播背景或者个人中心背景。
网页一键变灰
body{
filter: grayscale(1);
}一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。
一键换主题色
body {
filter: hue-rotate(45deg);
}给body标签设置这个属性样式，改变角度看看效果吧。
网页css波浪
svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height:40%;
box-sizing: border-box;
display: block;
background-color: #ffffff;
}一般用于登录/注册页面的顶部或底部，实现一个波浪滚动效果。
文字超出显示省略号
p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}一般用于文本的超出隐藏显示省略号效果，应用很广泛。
-webkit-line-clamp 属性为需要显示的行数，例子中为2行。
设置字母大小写
p {text-transform: uppercase} /* 所有字母变成大写字母*/
p {text-transform: lowercase} /* 所有字母变成小写字母*/
p {text-transform: capitalize} /* 首字母大写*/
p {font-variant: small-caps} /* 字体变成小型的大写字母*/设置placeholder样式
input::-webkit-input-placeholder {
color: red;
}隐藏滚动条
div::-webkit-scrollbar {
display: none
}禁止选中
.texts{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}移动端软键盘右下角搜索文字
<form action="#">
<input type="search" placeholder="请输入..." name="search" />
</form>本文共 241 个字数,平均阅读时长 ≈ 1分钟
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024年06月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录