CSS 教程 在线

2678css省略号

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

-webkit-line-clamp 限制在一个块元素显示文本的行数 需要组合其他的WebKit属性

常见结合属性
display: -webkit-box; 必须结合的属性 将对象作为弹性伸缩盒子模型显示

-webkit-box-orient 必须结合的属性  设置或检索伸缩盒对象的子元素的排列方式

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}

p::after{

content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(right, transparent, #fff 55%);

background: -moz-linear-gradient(right, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

div {  

  white-space:nowrap;  

  overflow: hidden;

  text-overflow: ellipsis;

 

}

div {      

  overflow: hidden;      

  text-overflow: ellipsis;      

  display: -webkit-box;       

  -webkit-line-clamp: 4;       

  -webkit-box-orient: vertical;     

}

2660定义右上角边框的形状 3

style="box-shadow: rgb(170, 170, 170) 0px 0px 14px 0px;"

2625CSS3 教程

CSS3是CSS技术的升级版本2001年5月23日W3C完成了CSS3的工作草案 主要包括盒子模型 列表模块 超链接方式 语言模块 背景和边框 文字特效 多栏布局等模块

2535CSS3 弹性盒子

块元素垂直居中问题采用 flex 解决。

行内元素垂直居中问题解决如下:

1)单行

该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

2)多行

设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;