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

翛翾梓

已于 2022-10-26 11:10:48 修改

阅读量2.6k

点赞数 2

分类专栏：前端小程序文章标签： html5 css html

于 2019-08-04 11:56:08 首次发布

本文链接：https://blog.csdn.net/weixin_43118088/article/details/98454051

版权

前端同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

小程序

21 篇文章 0 订阅

订阅专栏

小程序 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>