移动手机端0.5px线条

添加对应的类名,在pc算线条展示1px,2c端展示0.5px效果

/* 1px hack */
.ui-border-t {
  border-top: 1px solid #e0e0e0; }

.ui-border-b {
  border-bottom: 1px solid #e0e0e0; }

.ui-border-tb {
  border-top: #e0e0e0 1px solid;
  border-bottom: #e0e0e0 1px solid;
  background-image: none; }

.ui-border-l {
  border-left: 1px solid #e0e0e0; }

.ui-border-r {
  border-right: 1px solid #e0e0e0; }

.ui-border {
  border: 1px solid #e0e0e0; }

.ui-border-radius {
  border: 1px solid #e0e0e0;
  border-radius: 4px; }
  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-border-radius {
      position: relative;
      border: 0; }
      .ui-border-radius:before {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid #e0e0e0;
        -webkit-transform: scale(0.5);
        -webkit-transform-origin: 0 0;
        padding: 1px;
        -webkit-box-sizing: border-box;
        border-radius: 8px;
        pointer-events: none; } }

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .ui-border {
    position: relative;
    border: 0; }

  .ui-border-t, .ui-border-b, .ui-border-l, .ui-border-r, .ui-border-tb {
    border: 0; }

  .ui-border-t {
    background-position: left top;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }

  .ui-border-b {
    background-position: left bottom;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }

  .ui-border-t,
  .ui-border-b,
  .ui-border-tb {
    background-repeat: repeat-x;
    -webkit-background-size: 100% 1px; }

  .ui-border-tb {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
    background-position: top, bottom; }

  .ui-border-l {
    background-position: left top;
    background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }

  .ui-border-r {
    background-position: right top;
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }

  .ui-border-l,
  .ui-border-r {
    background-repeat: repeat-y;
    -webkit-background-size: 1px 100%; }

  .ui-border:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
    -webkit-background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
    background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
    -webkit-background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
            background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
    background-repeat: no-repeat;
    background-position: top, right, bottom, left;
    padding: 1px;
    -webkit-box-sizing: border-box;
    z-index: 10;
    pointer-events: none; } }
时间: 2024-10-09 17:03:58

移动手机端0.5px线条的相关文章

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

jQuery手机端上拉刷新下拉加载更多页面

<!doctype html> <html> <head> <title>jquery 手机端上拉刷新下拉加载更多页面</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewpost" content="width=device-wi

手机端的轮播效果

手机端轮播效果,貌似以后能用得上吧 首先是结构html <section class="page pageshow"> <section id="tabPic"> <ul id="picList"> <li href="javascript:;"><img src="image/1.jpg" ></li> <li href=&qu

wap手机端页面根据dpr和宽度计算出font-size对应数值

最近在进行公司的wap端首页改版和添加活动页面,为了做的效果更好一些,就参考淘宝和京东的wap版,然后对淘宝的wap做了一些分析,淘宝的wap触屏版做的自适应和兼容性很不错,于是整理了下. wap手机端页面根据dpr和宽度计算出font-size对应数值表如下: dpr 最小宽度320px 最大宽度540px 系数 1 20px 33.75px 0.0625 2 40px 67.5px 0.125 3 60px 101.25px 0.1875 备注: 1.是按照倍数关系增加的 2.手机淘宝就是按

手机端第一屏页面文章的展开和隐藏

本人做的是手机端的前端开发,事事处处都得从手机用户的体验着手考虑.大家都知道手机相对于pc来说要小很多,所要容纳的东西相对于pc来说也要少之又少.一些重要的东西又希望用户在打开手机网站的第一屏就能看到,这时就要尽可能地将重点呈现给用户. 内容又由文字,图片等等信息组成,如果文字过长,就显得冗余,这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法. 需要的技术支持:CSS3,一般jQuery库: HTML代码如下: Html代码   <div class="slideup"&

移动手机端网页布局 常用的3种方式 总结

手机端网页现在已经发展的非常迅猛,很多公司度需要网页能兼容各种不同尺寸屏幕的手机. 下面我给大家讲讲我常用的3放布局方式: 1:响应式布局. 可以用px作为像素,网页进行平铺.全屏的用100%.高度可以用px写死,宽度可以用百分比.不管网页怎么拉伸,高度不变,宽度会相应的扩大. 2:em/rem  方式布局. 可以设置好html,body的字体大小,然后用不同的尺寸手机访问的时候,我们可以去修改body的字体大小,网页(网页的内容用rem设置宽度.高度)的之内容会自动进行缩放. 代码如: bod

手机端css实现active伪类

今天遇到手机端的css中a标签的active不起作用,原本想循环a标签,给当前的a标签添加class来解决,可觉得有点儿小麻烦,经查资料了解到解决此问题,只需要添加一个touchstart的空事件即可. 例子如下: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>*{ m

用JS写一个计算器(兼容手机端)

先看成果:1.PC端2. 首先确立html,有哪些东西我们要知道.布局大概的样子在心里有个数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>瑞雪的计算器</t