河北11选5开奖视频|河北11选5走势图一定|
设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

网页前端开发技巧之细边框有哪些写法?

发表日期:2019-4-2 作者来源:派谷网络 浏?#26469;?#25968;:

  我们在进行网页开发时,经常会遇到一些1px的细边框或细线条。比如下图的列表页面,每行列表之间的灰色细线条分隔线。

  网页前端开发技巧之细边框的几个写法

  一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就需要一些技巧来解决这个问题。

  1,做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,bg-size设?#27599;?00%,高1px

  .line li{

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

  background-size:100%1px;

  background-position:left bottom;}

  <ul class="line">

  <li></li>

  <li></li>

  <li></li>

  </ul>

  这个方式可以,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(transform),但如果要是边框更换颜色那不是还要在做图片了,好像是有点麻烦哦;

  2,所以用?#32454;?#26041;法联想到了线性渐变(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;}

  <ul class="line">

  <li>linear-gradient</li>

  <li>linear-gradient</li>

  <li>linear-gradient</li>

  </ul>

  这个方式还是有点瑕疵,改变描边位置(left,top,right,bottom)需要修改参数。

  如left描边需要改变:

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

  background-size:1px 100%;

  background-position:left;

  都不一一列出了,好像还是有点麻?#24120;?br />
  3,用CSS3阴影(box-shadow),就是用阴影做描边然后用伪类?#35759;?#20313;的给遮罩着,

  .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;}

  <ul class="line">

  <li>box-shadow</li>

  <li>box-shadow</li>

  <li>box-shadow</li>

  </ul>

  OK,这样子好多了。到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,具体的方案还需要大家在各自的项目中根据具体情况来决定。
本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权?#25512;?#23427;问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻
网站建设解决方案
河北11选5开奖视频
王者捕鱼器 意甲直播乐视 新电商时代如何赚钱 怎样看股票涨跌 合买大乐透8jia3 华夏彩票首页 天津11选5助手号码查询 捕鱼王2下载安装大厅 彩票2元网广东26选5 竞彩篮球胜分差怎么算