一、前言

不得不说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. 如何让nextcloud支持avi文件在线播放

    默认的nextcloud是不支持avi文件播放的,google查了一圈,都说是没法支持. 然而我觉得都是html5写的,为啥偏偏不支持. 查了一些资料,发现还是官方的代码少写了东西,可能是没考虑那么全 ...

  2. Android Studio项目用Git上传至码云（OSChina）

    工具: Git安装(官网下载,默认安装即可). 步骤一: 新建一个Android Studio项目: 步骤二: 申请OSChina账号.登陆并创建新项目 1. 2. 3.点击复制,下面在Android ...

  3. Oracle dblink的连接模式的关系测试总结

    这篇主要介绍一下database link由于连接数据库的方式不同遇到的一些问题,我们知道连接ORACLE服务器的模式一般有两种方式:专用服务器连接(dedicated server)和共享服务器连接 ...

  4. vsftpd.configro

    mmp卸载了vsftpd后 配置文件没了 安装也没有 留个做备份 嘿嘿 原始的: # Please see vsftpd.conf. for all compiled in defaults. # # ...

  5. 经度和纬度在SQL中的数据类型

    冬天太冷,等坐公司班车也很冷,就萌生了给班车做一个到站查询功能. 在某宝上买了汽车在线的GPS设备, 终生免费的服务的. 这里不得不提下这个设备的优点, 它提供API接口,还是免费的. 所以在班车上装 ...

  6. Docker-Docker-compose应用

    Docker-compose是用来定义和运行多容器应用的工具,它是独立于docker存在的,需要单独安装.实际应用场景中,我们的应用可能被打包运行在不同的容器里面,例如一个常规的web应用可能会涉及到 ...

  7. ASP.NET学习笔记 —— 一般处理程序之图片上传

    简单图片上传功能目标:实现从本地磁盘读取图片文件,展示到浏览器页面.步骤:(1). 首先创建一个用于上传图片的HTML模板,命名为ImageUpload.html: <!DOCTYPE html ...

  8. c/c++ 多线程 ubuntu18.04 boost编译与运行的坑

    多线程 boost编译与运行的坑 背景:因为要使用boost里的多线程库,所以遇到了下面的坑. 系统版本:ubuntu18.04 一,安装boost 1,去boost官网下载 boost_1_XX_0 ...

  9. mysql字段约束

    为了确保数据的完整性和唯⼀性,关系型数 据库通过约束机制来实现目. 一. unique 唯一性约束    : 值不可重复: 二. not null    非空约束    : 值不可为空: 三. def ...

  10. php微信h5支付超简单！！！

    本示例应用于tp3.2版本  不懂私聊我QQ:1195989301 请备注来意! 代码链接 请点击下载 密码: ekd4 不喜欢打字望谅解.....