CSS多行超出隐藏省略+transition过渡+transform变换效果等,记录一下总忘记的几个代码

  • A+
所属分类:技术

一、单行文本隐藏显示省略号

.danhang{
    width: 200px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

二、多行文本超出显示省略号(常用)

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端

.duohang {
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、文本禁止选中

/* 禁止选中 */
.txtcopy {-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}

四、transition 过渡

.donghua {-webkit-transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;transition:all .3s ease 0s;}

参考:https://www.w3school.com.cn/cssref/pr_transition.asp

五、transform 属性

.suofang{transform:scale(1.1);
-ms-transform:scale(1.1); /* Internet Explorer */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari 和 Chrome */
-o-transform:scale(1.1); /* Opera */
}

参考:https://www.w3school.com.cn/cssref/pr_transform.asp

六、侧栏滚动条自定义颜色

::-webkit-scrollbar { width: 12px;} /* 这是针对缺省样式 (必须的) */	
::-webkit-scrollbar-track { background-color: #000;} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb { background-color: #89000D;} /* 滑块颜色 */
::-webkit-scrollbar-button { background-color: #000; display: none;} /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner { background-color: black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

七、三角

.s_input:before{float:left;position:absolute;right:5px;top:-8px;z-index:99;content:".";font-size:0;width:0;height:0;border-right:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid #BBB;}

用div容器的before,绘制向上三角形。

八、渐变彩色背景

以上为效果

body{background-image: linear-gradient(to right,#313c48,#313c48 25%,#b47acc 25%,#b47acc 35%,#48a8f1 35%,#48a8f1 45%,#7dca59 45%,#7dca59 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);}

也可以调试不同宽度的百分比,同时还可以作为顶部导航条背景装饰条。

九、关于align="absmiddle"的说明

 元素名称    说明 
 AbsBottom   图像的下边缘与同一行中最大元素的下边缘对齐。  
 AbsMiddle   图像的中间与同一行中最大元素的中间对齐。  
 Baseline    图像的下边缘与第一行文本的下边缘对齐。  
 Bottom    图像的下边缘与第一行文本的下边缘对齐。  
 Left      图像沿网页的左边缘对齐,文字在图像右边换行。  
 Middle     图像的中间与第一行文本的下边缘对齐。  
 NotSet     未设定对齐方式。  
 Right     图像沿网页的右边缘对齐,文字在图像左边换行。  
 TextTop    图像的上边缘与同一行上最高文本的上边缘对齐。  
 Top      图像的上边缘与同一行上最高元素的上边缘对齐。

 

十、等待更新...

macyoyo

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: