CSS study

2018-01-13 11:02:17来源:网络收集作者:管理员人点击

分享

阿里云爆款

1.实现两条横线中间插文字


CSS study

PICK A PATH TO START
.pick-path-start {
width: 678px;
margin: 0 auto;
background-image: linear-gradient(transparent 9px, var-gray-8 10px, transparent 1px);     
}
.tip {
color: var-gray-4;
font-size: var-fs-down-1;
width: 184px;
text-align: center;
background-color: var-white;
margin: 0 auto;
letter-spacing: 0.7px;
}

2. 实现网格布局


background-image: repeating-linear-gradient(0deg, var-gray-8 1px,transparent 3px,transparent 80.7px),repeating-linear-gradient(90deg, var-gray-8 0px,transparent 2px,transparent 33.3%);

3.一个盒子,不需要边框,有立体的效果,给div添加box-shadow


div {
box-shadow:0 1px 8px 0 rgba(0,0,0,0.12);
}
div:hover {
box-shadow:0 1px 4px 0 rgba(0,0,0,0.12);
}4. Solve the issue of image compression

1) use 图片会形状正常,图片缩放根据图片大小等比例


CSS study


width: auto;
height: auto;
max-width: 100%;
max-height: 100%;

例子:

{props.name}.card-image-container {
top: 0;
left: 0;
width: 100%;
height: 220px;
img {
margin: auto;
top: 0;
bottom: 0;
height: auto;
max-height: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
}
2)use background-image  这种情况图片会失真,虽然图片形状正常显示,因为最大边会铺满整个盒子,小边根据大边自适应长短,但不会铺满background-image: url("icon-house.svg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
5.由于IE不能兼容position,可以根据margin去调位置

6.IE不能实现....省略,只能使用line-height 或者 height让其显示多少行


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台