小程序 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; 就好了