小程序 css3 常用的一些样式；

一、背景颜色半透明

1. 透明背景颜色样式
- ```
 background:rgba(0,0,0,0.5);
```

2. 背景图片样式

background-image: url(../img/1.png) ;
background-size:480rpx  146rpx;
background-repeat: no-repeat;
background-position:46% 10%;

3. 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色
- ```
 background: linear-gradient(to bottom right, red , green , blue);
```

4 . 从左到右的线性渐变，带有透明度

 background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

二、阴影

1.文字阴影

box-shadow: 0px 2px 5px 5px #c3c3c3;
text-shadow: 5px 5px 5px #FF0000;

2.元素边框阴影

(1).黑色阴影

-webkit-box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow:  0px 3px 5px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0px 3px 5px 5px rgba(0, 0, 0, 0.15);

(2).白色阴影：

-webkit-box-shadow:  0px 3px 5px 5px rgba(245, 241, 241, 0.5);
-moz-box-shadow:  0px 3px 5px 5px rgba(247, 243, 243, 0.5);
box-shadow: 0px 3px 5px 5px rgba(250, 249, 249, 0.5);

三、文本段落样式

1.超过一行后面显示省略号

overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; // （行数）
-webkit-box-orient: vertical;

2.首行缩进
- ```
  text-indent: 24px;
```
3.文字之间的间距
- ```
  letter-spacing: 8px;
```
4.鼠标变为可点击的标志图标
- ```
  cursor: pointer;
```
5.强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行
- ```
  white-space:nowra;
```

6. 使用您需要的字体

 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf');}

7. 删除线

text-decoration:none;
text-decoration:underline;  下划线样式
text-decoration:line-through;  删除线样式-贯穿线样式
text-decoration:overline;      上划线样式

四、弹性盒

弹性盒的设置，是给父元素设置的

1. 子元素一行显示，两端对齐

display: flex;
justify-content: space-between;

2. 子元素一行显示，平均对齐

 display: flex;justify-content: space-around;);

3 . 子元素左右居中

display: flex;
justify-content: center;;

4. 子元素上下居中
- ```
  align-items: center;
```

5. 子元素上下左右居中

 display: flex;align-items: center;justify-content: center;

.box{height: 300rpx;background: #CECECE;display: flex;justify-content: center;align-items: center;/* 方向为列  */flex-direction: column;
}
/*只是为了区分一下、*/
.box view{background: #fff;margin: 4rpx;
}

<view class="box"><view>德萨范德萨</view><view>德萨范德萨</view><view>德萨范德萨</view><view>德萨范德萨</view>
</view>

改变一下子元素的排列方向

.box{height: 300rpx;background: #CECECE;display: flex;justify-content: center;align-items: center;/* 方向为行 */flex-direction: row;
}
.box view{background: #fff;margin: 4rpx;
}

图片的一个盒子里面，上下左右居中
图片大小只和外层的盒子大小有关，不会改变图片的比例，高度宽度自适应

五、图片上下左右居中，自适应盒子的大小

.postcent{width: 100%;padding-top: 100%;text-align: center; position: relative;display: block;overflow: hidden;
}
.postcent img {padding: 10px;transition: all 0.5s;position: absolute;top: 0;left: 0;right: 0;bottom: 0;height: auto;max-height: 100%!important;max-width: 100%;margin: auto!important;vertical-align: middle;box-sizing: border-box;
}

<div  class="col-xs-6  col-sm-4 col-md-3"><a href="anlidetail.html"><div class="anlilistimg"><section class="postcent"><img src="img/index/st1.png" alt=""></section><div class="anlitip"> 江湾城-地暖案例</div></div></a>
</div>

现AB两个div设置display：inline-block，出现上下错位问题，当AB里面内容为空时，错位问题消失
看了网上资料以及通过实践分析，总结如下

1.同一行的行内元素对齐方式默认是底部对齐，即vertical-align：baseline
2.对于内容为空的inline-block元素而言，该元素的基线就是它的margin底边缘，否则就是元素的内部最后一行内联元素的基线

解决方式：

1.float方式（考虑脱离流后后面元素不易控制，故不首选）
2.改变vertical-align属性。设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置

在我自己的项目中将每一项排列的节点加这个，vertical-align: bottom; 就好了

小程序背景图片样式阴影子元素上下左右居中上下居中左右居中相关推荐

微信小程序背景图片设置和图片自适应宽高
微信小程序背景图片设置和图片自适应宽高我们在开发过程中经常需要对一些元素设置图片为背景图片. 网络图片: .ServiceCenter{width: 100vw;height: 40vw;margi ...
小程序背景图片从服务器获取,小程序之背景图片的加载
说在前面最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,先说说关于如何解决小程序背景图片pc端调试完美不缺,而在真机调试的时候却消失不见的情况. 问题描述最近做项目的 ...
解决小程序背景图片在真机上不能查看的问题
解决小程序背景图片在真机上不能查看的问题参考文章: (1)解决小程序背景图片在真机上不能查看的问题 (2)https://www.cnblogs.com/web1/p/9018035.html 备忘 ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
关于微信小程序背景图片设置
微信小程序在 .wxss文件中不允许设置background-image :url('/img/bg.png');解决方法有如下两种一:在 .wxss文件中设置背景图片时使用base64 网址:ht ...
微信小程序背景图片base64_微信小程序背景图片显示不出来
开发小程序的时候,设置页面的背景,用到css代码:.page__bd{ width: 100%; height: 220px; background: url('../../assets/img/im ...
微信小程序 — 背景图片实现。
如图微信小程序背景色.上面放文字如何实现此效果.背景色设置css样式是position: relative; 文字设置css样式position: absolute; 布局wxml: <view ...
微信小程序背景图片background无法在手机端显示问题解决方案
之前做过一个小程序项目,页面中有背景图片,使用web开发工具调试时候背景图片能正常显示,使用真机调试及发布线上版本的时候图片不显示,刚开始以为是图片显示路径问题,后面问啦度娘后才发现微信小程序不支持背 ...

小程序背景图片样式阴影子元素上下左右居中上下居中左右居中

一、背景颜色半透明

二、阴影

三、文本段落样式

四、弹性盒

弹性盒的设置，是给父元素设置的

五、图片上下左右居中，自适应盒子的大小

小程序背景图片样式阴影子元素上下左右居中上下居中左右居中相关推荐

最新文章

热门文章

小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中

一、 背景颜色半透明

二、 阴影

三 、 文本段落样式

四、 弹性盒

弹性盒的设置，是给父元素设置的

五、图片上下左右居中，自适应盒子的大小

小程序 背景图片样式 阴影 子元素上下左右居中 上下居中 左右居中相关推荐

最新文章

热门文章

小程序背景图片样式阴影子元素上下左右居中上下居中左右居中

一、背景颜色半透明

二、阴影

三、文本段落样式

四、弹性盒

小程序背景图片样式阴影子元素上下左右居中上下居中左右居中相关推荐