一、前言

不得不说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. Web API 持续集成：PostMan+Newman+Jenkins（图文讲解）

    本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上篇文章我们已经完成了API测试工具选型,接下来是一系列周期性的开发 ...

  2. android WebView技术笔记（存储技术）

    作为刚刚开始工作的新手程序猿,各种知识还不算熟练,所以将学习到的知识记录一下以免以后忘记. WebView加载h5的知识现在可以说非常的常用,通过加载h5的网页可以在不更新app的情况下来更新app的 ...

  3. Android深入理解Context（一）Context关联类和Application Context创建过程

    前言 Context也就是上下文对象,是Android较为常用的类,但是对于Context,很多人都停留在会用的阶段,这个系列会带大家从源码角度来分析Context,从而更加深入的理解它. 1.Con ...

  4. Powershell Linux正式版可用，启动名称有变

    CentOS yum install powershell 但并没有powershell这个可执行文件.通过搜索可以发现在powershell目录里有pwsh可执行文件,那么以后就要用pwsh执行了. ...

  5. web测试之功能测试总结

    web测试是什么? web测试就是基于BS架构的软件产品的测试,通俗点来说就是web网站的测试 web功能测试包括哪些方面? 功能测试主要包括6大部分: 1.链接测试 2.表单测试 3.搜索测试 4. ...

  6. 简单概括下MongoDB 4.0 新特性

    (1)跨文档事务支持 (ACID) 首个支持跨文档事务的NoSQL云数据库,将文档模型的速度,灵活性和功能与ACID保证相结合.现在,使用MongoDB解决各种用例变得更加容易. (2)40%迁移速度 ...

  7. linux的常用命令介绍

    1.ls  列出当前目录下的所有的文件和文件夹的名称. 参数如下:-a 显示隐藏文件 -l 显示方式为列表 -h 以可读性高的方式输出 eg: ls -lh /logs/tran  目录如果不指定(相 ...

  8. 初窥css---盒子以及盒子扩展

    盒子以及盒子扩展 盒子 盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(...),并且使得网页更加容易维护. 盒子的常用属性 宽和高这两个属性就 ...

  9. redis 安装时候遇到 jemalloc 问题记录

    https://www.cnblogs.com/lovemdx/p/3199886.html https://blog.csdn.net/yfkiss/article/details/7035579 ...

  10. 字符串赋值给字符指针(char *a="hello")的正确理解方式

    对于语句  char *a="hello"; 对于这个声明方式,会造成的误解是:声明了一个字符指针(它会指向一个位置),将“字符串”赋值给 指针表达式"*a"所 ...