实现 1像素border

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ‘ ‘

border-none()
  &:after
    display: none

使用时首先


1

@import "../../common/stylus/mixin.styl";

 
为匹配不同设备，定义基本样式

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

转自：http://www.cnblogs.com/jiangyangchang/p/6530385.html

注： 先定义一个 mixin (mixin 是 css 预处理器提供的一个方法，它可以通过定义一个函数，比如 border-1px($color),在其中定义的css代码，可以在其他css中直接通过调用函数来引用)

通过对伪类的缩放，来实现在不同屏幕下的1px 效果。

为了方便引用，

时间： 2024-10-13 09:30:35

实现 1像素border的相关文章

移动端像素border的实现

知识点一.如何在手机上看我们制作的移动端页面. 正常我们在电脑上都是按如下图来制作手机页面的: 如果要在手机上面看就不能用localhost了.所以,进入命令行,输入ipconfig查看本地ip地址: 然后返回本地页面,把localhost替换成这个地址.然后把整体输入在手机上,就能看到页面在手机上的样子了. 接下来制作我们的像素border. 第一步: mixin.less 代码: .border-1px(@color){ position:relative; &:after{ display

（5）css盒子模型

CSS 盒子模型概述 ***什么是CSS的盒子模型呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名:内容(content).边框(border).内边距(padding).外边距(margin), CSS盒子模型都具备这些属性. ***属性我们可以把它转移到我们日常生活中的盒子(箱子)来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模型. 盒子模型是css控制页面是一个很重要的概念. 所有网页的页面中的元素都可以看成是一个盒子,占据着一定的页面空间. 一

移动端屏幕的适配

因为对H5较感兴趣,所以没事的时候会看一些文章博客. 废话不多说,先引入问题, 关于移动端屏幕的适配你有没有什么想说的 ?首先 我之前一直使用的就是这种Rem 缩放的方法去做的,content= "width= device-width",initial-scale=1.0,可以实现针对不同屏幕实现缩放效果,并且不出现滚动条, 而在内容部分使用 Rem进行对等比缩放,我们知道Rem 是一个相对长度 单位,它的大小会根据HTML根元素设置的font-size的大小进行换算, 根元素(ht

UR官网特效

<!DOCTYPE html>                              <!--申明文档类型:html--> <html lang="en">                               <!--html 根标签 language--en:english--'zh-CN'中文简体--> <head>                                              &l

纯css控制－表格表头固定,内容多时滚动内容

<html> <head> <style type="text/css"> * { margin: 0; padding: 0; } /*所有内容都在这个DIV内*/ .all { width: 100%; border: 1px solid #000000; } /*表头在这个DIV内*/ .title { width: 500px; /*这个宽度需要与下面的内容的DIV相等*/ } /*表格样式*/ table { width: 100%; /*

css基础 设置div块的上下左右外填充距离margin(缩写形式)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

3组件骨架开发

移动端的开发,需要通过<meta>标签设置视口 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> App是挂载在index.html中的<body>元素下的唯一个子元素<div>中的.要使用Vue组件时,在vue文件中要用ex

easyui(一) 初始easyui

中午贪睡,睡到3点多,爬起来赶紧学习,学习是我快乐(自我催眠).哈哈~ --WH 一.什么是easyui? 学习一个东西,最重要的是知道它的定位(是干嘛的,基本的用法是什么,快速入门),其实easyui也非常简单,不要觉得很难. easyui就是一个前端框架,JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,

以工作表的方式合并excel

#!/usr/bin/env python import xlsxwriter,xlrd import sys,os.path reload(sys)  sys.setdefaultencoding('utf8') def MergeExcelToWorksheet(*arg): lfile=arg fname={} worksheet={} for h in lfile: fname[h] = h print h data = xlrd.open_workbook(fname[h])