一、前言

不得不说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. GridContrl 通用类

    using DevExpress.Data; using DevExpress.Utils; using DevExpress.XtraGrid.Views.Grid; using System; u ...

  2. Nginx支持 React browser router

    修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...

  3. 我的世界 ParaCraft 结合开源地图 OpenStreetMap 生成3D校园的方法简介

    我的世界ParaCraft结合开源地图OpenStreetMap生成3D校园的方法简介 版本1.0 日期2019.2.3 作者Ray (82735589@qq.com) www.TimeGIS.com ...

  4. C#实现多级子目录Zip压缩解压实例

          参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩,类似winrar,可以选择 ...

  5. 从零学习Fluter(九):正式使用flutter进入商业开发

    一下为下个app 功能模块简要划分 接口文档需要说明 公告接口 messageTitle -- 消息内容 红包墙接口 使用说明 地理位置定位 shareGetMoney - 分享活动金额 lookCo ...

  6. (办公)springboot配置表单验证@Valid

    项目用到了springboot,本来很高兴,但是项目里什么东西都没有,验证,全局异常这些都需要自己区配置.最近springboot用的还是蛮多的,我还是做事情,把经验发表一下. SpringBoot提 ...

  7. lodash源码分析之去重--uniq方法

    lodash.js包是node开发中常用的js工具包,里面有许多实用的方法,今天分析常用的一个去重方法---uniq 用法 _.uniq([2, 1, 2]) // => [2, 1] 源码包 ...

  8. 一个ELK日志检索实施案例

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  9. pyhton崩溃的第六天，又有新成员

    首先在今天的刚刚开始,补充一下上次两个成员的一些特有的方法,一个是列表,一个是字典,首先列表里面多了一个反转的方法,名叫reverse,简单就是把列表中的123变成了321,还有一个方法是sort,是 ...

  10. Greedy分饼干

    分饼干:因为饼干大小和孩子的食欲度不一定是按大小顺序排列的,所以开始要排序一下,然后从最小的饼干依次从食欲小的孩子开始看,如果他愿意吃,就++,看下一个小孩子,这回拿的就是大一点的饼干了. Examp ...