一、前言

不得不说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. No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android"

    安装完NDK的时候出现了这个错误,网上的办法是下载旧版的NDK,将其中的toolchain复制到新版的NDK中. 但其实不用这么麻烦. 经过对新版NDK的研究,发现NDK的更新记录里有一段话 This ...

  2. jar包 pom

    动态的web工程tomcat 自带jar包: jstl: taglibs-standard-impl-1.2.5.jar taglibs-standard-spec-1.2.5.jar   //以下是 ...

  3. 【shell基础】数学计算

    #!/bin/bash #4.4.sh s= #定义一个求和变量,初值为0. t=`**$` #用expr改变运算顺序,求x的y次方. t=$[t*] #t乘以3. s=$[s+t] #结果相加. t ...

  4. 数据库【mongodb篇】练习操作

    本文的目标是通过大量的示例,来更好的理解如果在Mongodb中进行数据操作: 初入客户端刚利用 mongod命令进入客户端环境,此时对数据库一无所知: 举目四望,想知道现在有哪些数据库,   show ...

  5. Flink打包生成安装包缺少jar包

    官方默认打包生成的安装包的flink-release-1.7.0\flink-dist\target\flink-1.7.0-bin\flink-1.7.0\lib下缺少jar flink-dist项 ...

  6. LVM 磁盘分区扩容

    前提:将磁盘中未分区磁盘进行分区操作 https://www.cnblogs.com/guoxiangyue/p/10033367.html 然后进行vg扩容 pvcreate /dev/sdc lv ...

  7. Django学习笔记（1）--第一个项目

    操作系统:Windows Python版本:python3.6 前置工作: pip install virtualenvwrapper #安装虚拟环境管理包 1.创建虚拟环境 mkvirtualenv ...

  8. java网络编程基本知识

    1.基本概念 网络:一组相互连接的计算机,多台计算机组成,使用物理线路进行连接 网络连接的功能:交换数据.共享资源 网络编程3要素: IP 地址:唯一标识网络上的每一台计算机,两台计算机之间通信的必备 ...

  9. 彻底搞懂spark的shuffle过程（shuffle write）

    什么时候需要 shuffle writer 假如我们有个 spark job 依赖关系如下 我们抽象出来其中的rdd和依赖关系: E <-------n------,              ...

  10. 随心测试_职场面试_001<SX的面试观点>

    快速理解_求职面试:必不可少的嘴 +  双向沟通交流 = 人与人之间的心理游戏 ps:以下为_面试题回答套路_案例,仅供参考,不挖坑 常见的面试题: 你是如何看待软件测试这个行业的? 说说你对软件测试 ...