一、前言

不得不说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/star24_on@2x.png");

}

@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {

   .star.star-24 .star-item.on {

    background-image: url("../images/stars/star24_on@3x.png");

  }

}

 .star.star-24 .star-item.half {

  background-image: url("../images/stars/star24_half@2x.png");

}

@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {

  .star.star-24 .star-item.half {

    background-image: url("../images/stars/star24_half@3x.png");

  }

}

.star.star-24 .star-item.off {

  background-image: url("../images/stars/star24_off@2x.png");

}

@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {

   .star.star-24 .star-item.off {

    background-image: url("../images/stars/star24_off@3x.png");

  }

}

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>

Css(常用的特殊效果)的更多相关文章

  1. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  2. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  3. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  4. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  5. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  6. CSS常用样式（四）之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  7. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  8. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  9. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

随机推荐

  1. 处理范例代码Webapi中的Mongodb的Bson中ObjectId反序列化异常

    微软代码范例中的一个Bug 处理Mongodb的Bson中ObjectId反序列化异常 https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/f ...

  2. Java中的守护线程

    守护线程的概念 在java中有两种线程,守护线程和非守护线程,其两者并没有本质的区别,唯一的区别就是当前的用户线程退出的时候,若只存在唯一的A线程,若A线程为守护线程,那么JVM将会直接退出,否则JV ...

  3. 导入虚拟机vmware，此主机支持Intel VT-x，但Intel VT-x处于禁用状态和黑屏

    解决方法:进入BIOS(按什么键进入bios,需要看你用什么电脑),把Intel Virtualization Technology         设置enabled 然后是黑屏解决方法:管理员模式 ...

  4. Java Memory Management

    How Memory works in Java The role of the stack - Each time you call a function, Java pushed the loca ...

  5. Docker + Sonarqube 环境搭建

    Sonar概述 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具. 一,postgres 数据库下载 docker pul ...

  6. Tomcat设置cmd窗口的title属性

    说明:官网下载tomcat之后,双击bin目录下的startup.bat文件,即可运行tomcat:linux下面运行startup.sh. 但是如果测试服务器上面搭建了多个项目,则启动之后窗口一样, ...

  7. firewalld防火墙设置

    CentOS7/RHEL7系统默认的iptables管理工具是firewalld,不再是以往的iptables-services,命令用起来也是不一样了,当然你也可以选择卸载firewalld,安装i ...

  8. 宝塔控制面板创建ftp后链接不上的解决方法

    很多的新手在安装宝塔面板并且创建完ftp管理后链接ftp居然链接不上?有许多朋友都不知道本站q302博客也是基于宝塔控制面板管理的,本站在安装网站完成后也和你们一样ftp链接不上,后面经过多次测试之后 ...

  9. Python3中如何解决中文乱码与编码的问题

    1.解决乱码问题: pyhton中内部所有编码是Unicode,中文是gbk:正常情况下,我们输出的是utf-8: 我们可以采用sys.getdefaultencoding()查看系统默认的编码: 解 ...

  10. RabbitMQ的一些有用教程

    最近学习了一些RabbitMQ的知识,现在对所阅读过的一些非常优秀的教程进行总结,感谢各位博主和大神的无私奉献. 一.原理篇 https://blog.51cto.com/lookingdream/2 ...