一、前言
不得不说css真强大，总结了几个常用的css特殊效果
二、主要内容
1、几个特殊效果
$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4; // 一像素下边框
bottom-border-1px($color)
position relative
border none
&:after
content ''
position absolute
left 0
bottom 0
width 100%
height 1px
background-color $color
transform scaleY(0.5) // 一像素上边框
top-border-1px($color)
position relative
&::before
content ''
position absolute
z-index 200
left 0
top 0
width 100%
height 1px
background-color $color //根据像素比缩放1px 像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 )
.border-1px
&::before
transform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 )
.border-1px
&::before
transform scaleY(.333333)
//根据像素比来使用2x 图3x 图
bg-image($url)
background-image: url($url + "@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png") //清除浮动
clearFix()
*zoom 1
&::after
content ''
display block
clear both
2、使用2x 3x图做五星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.star.star-24 .star-item {
width: 10px;
height: 10px;
margin-right: 3px;
background-size: 10px 10px;
}
.star.star-24 .star-item:last-child {
margin-right: 0;
}
.star.star-24 .star-item.on {
background-image: url("../images/stars/[email protected]");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.star.star-24 .star-item.on {
background-image: url("../images/stars/[email protected]");
}
}
.star.star-24 .star-item.half {
background-image: url("../images/stars/[email protected]");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.star.star-24 .star-item.half {
background-image: url("../images/stars/[email protected]");
}
}
.star.star-24 .star-item.off {
background-image: url("../images/stars/[email protected]");
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
.star.star-24 .star-item.off {
background-image: url("../images/stars/[email protected]");
}
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div class="star star-24">
<span class="star-item on"></span>
<span class="star-item on"></span>
<span class="star-item on"></span>
<span class="star-item half"></span>
<span class="star-item off"></span>
</div>
</body>
</html>