css 常用分享

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

文字单行超长省略

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

word-break:break-all;//允许英文换行

文字多行超长省略

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

网站把背景设置为黑白页:

html{ 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: gray; 
}

一个简单的加载样式

.loading {
	position: relative;
}
.loading::before {
	content: "";
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	transform: translate(-50%,-50%);
	left:50% ;
	top: 50%;
	border-radius: 50%;
	border: 3px solid #ba55d380;
}

.loading::after {
	content: '';
	position: absolute;
	width: 50rpx;
	height: 50rpx;
	transform: translate(-50%,-50%);
	left:50% ;
	top: 50%;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #f0f;
	/* 动画 时长 linear是匀速运动 infinite 是无限次运动 */
	animation: rotate 1s infinite ;
}
/* 下面定义一下动画 */
@keyframes rotate {
	0% {
		opacity: 1;
		transform: rotate(0);
	}
	100% {
		/* 顺时针旋转360度 */
		transform: rotate(360deg);
		opacity: .8;
		visibility: hidden;
		z-index:1;
	}
}

定位垂直水平居中

/*方案1*/
.position{
    position: absolute;
    transform: translate(-50%,-50%);
    left:50% ;
    top: 50%;
}

/*方案2 在父元素添加弹性布局*/
.position{
    display: flex;
    align-items: center;
    justify-content: center;
}

CSS中使用变量

:root {  
 --c-color: red;  
}  
.title {  
 background-color: var(--c-color);  
}

渐变色的使用,渐变分为线性渐变,径向渐变

//渐变(方向)  
background: linear-gradient(to right, rgba(255, 255, 255, 0),#3FB6F7,rgba(255,255,255,0));  
  
//渐变(角度)  
background: linear-gradient(88deg, #4DF7BF 0%, rgba(77, 247, 191, 0.26) 12%, rgba(77, 247, 191, 0) 100%);

边框渐变

.border-grident{
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border: 4px solid;
  border-image: linear-gradient(to right, #1D7DFA, #578aef) 4;
}

设置一个三角形

/*这是一个向下的三角形,让border的上边框可见，其他边框颜色都设置为透明,同理可设置其他三角形*/
.down-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

毛玻璃特效

.login {  
  backdrop-filter: blur(5px);  
}

文本设置为大写/小写

/* 大写 */  
.upper {  
  text-transform: uppercase;  
}  
  
/* 小写 */  
.lower {  
  text-transform: lowercase;  
}

首字母下沉

p.texts:first-letter {  
  font-size: 200%;  
  color: #8A2BE2;  
}

自定义鼠标光标

body{    
   cursor: url("path-to-image.png"), auto;  
}