css一些小样式【念念不想忘521吧】

11月16日漏签0天

念念不想忘521吧关注：27贴子：4,058

6回复贴，共1页

<返回念念不想忘521吧

css一些小样式

只看楼主收藏回复

我只专注做移动端
可能对pc端的兼容性不够好尤其是IE
而且大多都是css3实现的

送TA礼物

1楼2017-09-04 12:19回复

1.用css画的优惠劵，现在还存在的缺陷，单位还是px，字体跟line-height的关系没有体现出来
效果图如下：

源码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
background-color:#F39B00;
width: 387px;
height: 140px;
padding: 0 10px;
background-image: radial-gradient(#fff 5px ,transparent 0),
radial-gradient(#fff 5px ,transparent 0),
linear-gradient(150deg,transparent 50%,rgba(255, 255, 255, .15) 0);
background-size: 20px 20px,20px 20px,100% 100%;
background-repeat: repeat-y,repeat-y,no-repeat;
background-position: -10px 0,calc(100% + 10px) 0,0 0;
display: flex;
color:#fff;
}
.box1{
padding: 16px 15px;
width: 220px;
border-right: 2px dashed rgba(255, 255, 255, .3);
text-align: left;
font-size: 16px;
}
.box1 p{
line-height: 131.25%;
margin:0;
}
.box1 sub{
position:relative;
top:-5px;
color:rgba(255,255,255,.8);
}
sub:first-of-type{
font-size: 34px;
}
.box1 span{
font-size: 50px;
line-height: 65px;
}
.box2{
display: inline-block;
padding: 21px 14px;
width: 100px;
vertical-align: text-bottom;
font-size: 30px;
color: rgb(255,255,255);
text-align: center;
}
.box2 p{
margin-top: 15px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="box">
<div class='box1'>
<p >XXXX折扣卷</p>
<sub class="box3">￥</sub>
<span>50.00</span>
<sub>优惠劵</sub>
<p>订单满100元</p>
</div>
<div class="box2">
副卷
<p>
2017-09-01<br />
2017-10-01
</p>
</div>
</div>
</body>
</html>

2楼2017-09-04 12:22

收起回复

如何使手机端显示小于1px的描边
核心原理就是使用 transform:scale()来进行缩放
方法一：
.scale {
position: relative;
}
.scale:after {
position: absolute;
content: '';
left: 0;
top: 0;
height: 1px;
width:100%;
background-color: red;
-webkit-transform: scale(1,.5);
transform: scale(1,.5);
}
方法二：
div{
width:100%;
height:1px;
background:red;
transform: scale(1,.5);
}