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      图像的上边缘与同一行上最高元素的上边缘对齐。

 

十、skew的2D倾斜特效

CSS多行超出隐藏省略+transition过渡+transform变换效果等,记录一下总忘记的几个代码如图效果,可参考https://www.runoob.com/cssref/css3-pr-transform.html的transform属性。

.slide{
    display: inline-block;
    box-shadow: 1px 1px 0 #00c0d4;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    transform: skew(-20deg);
    height: 100%;
}

十一、css 属性clip-path之多边形polygon

<polygon> 标签用来创建含有不少于三个边的图形。

属性的用法

polygon(<x1> <y1>, <x2> <y2>, ..., <xn> <yn>) 定义了每一个点的坐标,从上图也能看出,起点是从左上角开始计算的,可以用百分百,也可以用px等单位。

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

.joined_wrapper {
    background: #0db896;
    clip-path: polygon(0 0, 100% 17%, 100% 100%, 0% 100%);
}

1.以上为核心代码和样例,梯形。

2.三角形代码

clip-path: polygon(50px 100px, 160px 30px, 160px 170px);

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

50px 110px, 50px 90px, 160px 30px, 260px 30px, 400px 90px, 480px 150px, 480px 50px, 400px 110px, 260px 170px, 160px 170px

十二、常用的几种IE9的CSS-hack写法

div {

background-color:red\0;  /* ie 8/9*/

background-color:blue\9\0;  /* ie 9*/

*background-color:green;  /* ie 7*/

_background-color:gray;  /* ie 6*/

}

注意写csshack的顺序,其中:

1.background-color:red\0;IE8和IE9都支持;
2.background-color:blue\9\0; 仅IE9支持;

(1)区别FF(IE8)与IE6 IE7

backgorund:orange; FF和IE8背景色将为橘黄色

*backgorund:red;   IE6和IE7背景色将为红色

(2)区别FF(IE8)与IE6与IE7

background:orange;   FF和IE8背景色将为橘黄色

*background:red !important;  IE7背景色将为红色

*background:blue;     IE6背景色将为蓝色

(3)区别FF(IE8)与IE6与IE7

background:orange;        FF和IE8背景色将为橘黄色

*background:red;          IE7背景色将为红色

_background:blue;         IE6背景色将为蓝色

(4)区别FF与IE6 IE7 IE8 IE9

color:gray;       FF等非IE浏览器字体色将为灰色

color:red\9;     IE8 IE9字体色将为红色

*color:green;     IE7字体色将为绿色

_color:blue;     IE6字体色将为蓝色

提示:CSS HACK书写顺序:先写FF等非IE浏览器所需样式,其次写IE8/9所需样式,接着是IE7的,再接着才是IE6的!

总结:实际运用中我感觉比较少用到!important ,只要你记住”*”和”_”我想就足够区别于FF(IE8)与IE6与IE7了.

 

十三、等待更新...

 

 

macyoyo

发表评论

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