Maison >interface Web >tutoriel HTML >CSS 3中细线边框如何实现?_html/css_WEB-ITnose

CSS 3中细线边框如何实现?_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:34:591142parcourir

      在app应用开发中,我们常常都需要用到css3来设置应用的样式。由于app都是在移动设备上进行展示,所以边框描边的线一般都小于1px,而以往我们使用的都是1px及以上的。那么问题来了,对于小于1px的边框怎么处理呢?为大家介绍几种css3中细线边框的写法,希望对遇到类似问题的童鞋有帮助。

1、做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设置宽100%,高1px

.line li{ 

            background: url('line.png') left top no-repeat;

            background-size: 100% 1px;

            background-position: left bottom;}

       

  •    

  •    

这种方法有一个问题,就是左右边框描边虽然可以做旋转(transform) ,但如果要是边框更换颜色那岂不是还要再做图片了;

2、通过上面的方法,我们也很容易联想到线性渐变(linear-gradient),具体实现如下:

.line li{  border: none;

  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);

  background-image: -moz-linear-gradient(#222 50%,transparent 50%);

  background-image: -o-linear-gradient(#222 50%,transparent 50%);

  background-image: linear-gradient(#222 50%,transparent 50%);

  background-size:  100% 1px;

  background-repeat: no-repeat;

  background-position: bottom;}

       

  • linear-gradient
  •    

  • linear-gradient
  •    

  • linear-gradient

这种方法仍然不够完美,改变描边位置(left,top,right,bottom)时需要修改参数,如 left描边需要改变:

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);

background-size:  1px 100%;

background-position: left;

 

3、那还有什么方法可以解决细线边框问题呢?我们不妨可以试试了CSS3阴影(box-shadow),用阴影做描边然后用伪类把多余的给遮罩着:

.line li{box-shadow: inset 0 -1px 1px #000;background: #fff;margin-left: -1px;margin-bottom: 10px;position: relative;}

.line li::after{content:'';position: absolute;top:0;left: 0px;right: 0px;bottom: 0px;border: 1px solid #fff;}

       

  • box-shadow
  •    

  • box-shadow
  •    

  • box-shadow

 

虽然,小编分享的几种方法都还存在瑕疵,具体使用哪种方法,你可以根据你的情况而定。如果你有更完美的解决方案的话,也欢迎分享出来,大家一起学习,一起进步。

 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn