css各种小问题

标题

地图下面的效果是css的遮罩实现的代码如下

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
	.mask {
						width: 100%;
						height: 80%;
						position: absolute;
						top: 0;
						background: linear-gradient(to bottom,
								rgba(22, 21, 21, 0),
								rgba(255, 255, 255, 1));

mask 是相对于父元素的一个子元素，父元素要添加加relative定位，

background：linar-gradient是控制线性渐变的一个属性，而css3的rgba让这个属性如虎添翼
关于这俩个东西可以在mdn介绍文档上看一下，很详细！！！！

推荐一些遮罩层的效果展示https://blog.csdn.net/xygg0801/article/details/69668973?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E9%81%AE%E7%BD%A9%E5%B1%82&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-5-.pc_search_result_control_group&spm=1018.2226.3001.4187

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

说明
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
z-index必须配合定位使用，否则没有效果

多行文本省略

单行文本省略
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
overflow: hidden;          // 溢出隐藏
text-overflow:ellipsis;   // 多出文本变成省略号
white-space: nowrap;    //内容溢出不换行

多行文本省略
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
display: -webkit-box;         // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient: vertical; //必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
-webkit-line-clamp: 3;         //展示文本多少行
overflow: hidden;              
注意：：：虽然设置溢出隐藏，但是有的地方还是会显示三行以外的文本比如微信小程序里，这是时候的解决方案有俩
一，在下方不留空间，如将padding-bottonm设置为0，这个时候省事，但是会影响整体的美感
二，给文本设置行高，直至多出文本被隐藏，这种方式虽然需要调数值，但是不影响美感，但是总感觉会出问题，建议第一种

css文本常用属性

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
text-indent:10px  // 首行缩进10px
font-size:20px;   //字体尺寸20px
line-height:40upx; //行高40upx 
font-weught:600;    //字体宽度600，注意此属性不带单位，常用数值有 400 600 700
 text-align: center;//字体居中

网站变灰色

<style>
    html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);}
  </style>