Css(常用的特殊效果)

一、前言

不得不说css真强大，总结了几个常用的css特殊效果

二、主要内容

1、几个特殊效果

$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4;// 一像素下边框
bottom-border-1px($color)position relativeborder none&:aftercontent ''position absoluteleft 0bottom 0width 100%height 1pxbackground-color $colortransform scaleY(0.5)// 一像素上边框
top-border-1px($color)position relative&::beforecontent ''position absolutez-index 200left 0top 0width 100%height 1pxbackground-color $color//根据像素比缩放1px 像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 ).border-1px&::beforetransform scaleY(.5)
@media only screen and (-webkit-device-pixel-ratio: 3 ).border-1px&::beforetransform 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&::aftercontent ''display blockclear 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>

转载于:https://www.cnblogs.com/xxm980617/p/10786451.html

Css(常用的特殊效果)相关推荐

div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
[css] css常用的布局方式有哪些？
[css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通 ...
CSS常用的元素居中方法
参考:CSS: 常用的元素居中方法 CSS居中布局总结 1.水平居中 (1)文本水平居中 text-align: center; (2)块级元素水平居中 ①设置margin margin: auto; ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
[Web 前端] 010 css 常用的边框设置
css 常用边框属性概览参数释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式 solid 实线,dotted 点状线,das ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...

Css(常用的特殊效果)

Css(常用的特殊效果)相关推荐

最新文章

热门文章