云南网站建设 13608843679云南商城开发

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

————————————咨询电话:13608843679
点击统计:72  发布时间:2018-11-05 17:18:54

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




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

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

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

  <ul class="line">

  <li></li>

  <li></li>

  <li></li>

  </ul>

  这个方式可以,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(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;}

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

  都不一一列出了,好像还是有点麻烦;

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

  <ul class="line">

  <li>box-shadow</li>

  <li>box-shadow</li>

  <li>box-shadow</li>

  </ul>

  OK,这样子好多了。到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,具体的方案还需要大家在各自的项目中根据具体情况来决定。



转载自:沙漠风
关键词: app

信息推荐

————————————

● 建设英文网站 先了解这样四个事实点击统计:69 发布时间:2018-10-17 00:58:30

  根据易百讯了解到的情况,几乎所有的建站公司都可以建设外文网站。不少建站公司建设的外文网站,真的就是“外文网站”,就是将中文转换为外文,主要是英文。作为一家经营长达10年以上的建站公司,在易百讯看来,这样的外文网站的价值微乎其微,给企业带来的作用也微乎其微。  要从事外文网站建设,如下四个有别于国内情况,但又是“事实”,需要从事外文网站建设的建站公司了解清楚,因为这四个事实对建站工作是会产生影响的。  事实一:欧美盛行工程师文化  建站影响:重代码而轻推广  易百讯了解到这样一个事实

● 企业网站建设交换友情链接时要注意哪些问题点击统计:69 发布时间:2018-10-12 21:11:31

  在企业的网站建设中,互相交换网站友情链接有利于增加双方网站的访问量,是一种共赢互利的做法。但是交换链接要掌握技巧,否则可能有可能起到反作用,下面我来列举几个交换友情链接时的注意事项。  一、交换对象  网站链接根据来源可以分为两类,一种是企业内部连接,一种是和其他企业完成交换的网站友情链接。友情链接讲究质而不讲究量,其中选择和什么样的网站交换很重要,首先两个网站之间要有一定的相关性。双方网站之间的关联,能够保证两人者用户的交叉,这样其中一个企业网站的用户,在访问他们想要获取的网站信

● 手机优化网站方法都有哪些点击统计:69 发布时间:2018-10-07 16:27:14

  优化手机网站可和优化普通的网站是不一样的,虽然看起来好像手机网站里面的东西没有普通网站多,但是越是这种简单的内容,需要优化的内容更加多,不然是没办法把网页精简下来的,本文就说一说手机优化网站方法都有哪些。  一、页面以及定位设计  不管是移动端还是PC端,所有的网站肯定都是需要想清楚自己的消费群体定位方面的问题的,尽管现在使用智能手机的人群数量非常多,不过还是要知道我们国家大部分的手机使用者还是使用的2G网络,那些使用3G、4G网络的手机用户人群只占到了手机使用者的百分之十五左右。

● 文章原创影响SEO的关键 关键词在乎的数据与质量点击统计:69 发布时间:2018-10-06 15:30:52

  当代人当中超过80%在遇到困难的时候,都会依靠搜索引擎进行解决,目前使用的seo技术正是通过将网站搜索当中的排名提升,来更好地加快产品传播,也是当下的网络营销当中不能够缺少的一个环节。如果想要凭借能吸引并且留住客户,就必须要让用户们可以在网站上找到自己想要的信息,所以用户体验和内容必须过硬才可以达标。      一、质量  影响seo优化时的质量问题其实有很多可说的,当下有很多各种伪原创的文章相继诞生,所以就造成目前的互联网平台上面绝大多数的

● 网站内部结构改版需要注意几点以免影响排名点击统计:70 发布时间:2019-04-01 07:28:42

  在网站内容主题没有发生变化的情况下,随着网站的建设和个人经验的成熟,很多人不得不面对这样一个问题,网站结构改版因为种种原因必须得改,不改的话弊大于利。那么小编在这里郑重提示,不到万不得已,不要进行大规模的网站结构改版,更不要说更换网站内容主题这种自杀式的作法了。既然聊到了网站结构改版,那么就需要注意一下几点。不然不如重新建个新站。    网站结构改版通常上是说网站整体的架构和页面设计需要进行比较大的改动。  第一:要明确网站建设只是页面设计需要改版还是改用新的CMS系统,如果只是页

● 怎样创建网站才能更加的新颖点击统计:70 发布时间:2018-12-13 17:50:23

  随着社会的不断发展,网络在我们生活中也是变得越来越重要了。这也使得许多企业都看到了网络中所蕴含的巨大商机,纷纷创建了自己的官网。但是如何才能让自己的网站可以更加的突出,可以更好的吸引人的目光,也就成为了许多企业都特别关心的问题,下面就来给大家简单的介绍一下怎样创建网站才能更加的新颖。  一、网页打开速度  想要使得自己的网站建设的更加新颖,那么在创建网站的时候,就要注意一下,网页的打开速度是怎么样的,如果网页打开的速度特别的慢,那么也就会让许多用户都不想再进行等下去了。这样一来,也

● 网站设计公司和互联网广告公司有什么区别
点击统计:70 发布时间:2018-11-05 11:48:00

很多人分不清网站设计公司和互联网广告公司,认为是一回事,还有看到互联网广告公司里也有设计部门,就认为网站设计公司是小型的广告公司这些都是不正确的观点。网站设计公司和互联网广告公司干的根本不是同样的活,它们在商业活动中所处的位置也不同。其实客户们也经常把种公司的功能搞混,胡乱用人胡乱做事,让公司的事情变得很糟糕不但浪费了老板的钱,还浪费了太家的时间。设计和广告都是商业社会里商品流通环节中必不可少的部分,但是他们所处的位置、发挥的作用都不一样,以至于他们工作的方式状态、方法、目的往往大相径庭。要想了

● 互联网广告文案应该怎么写更利于传播
点击统计:70 发布时间:2018-11-04 18:29:24

绝大部分网络公司为了控制运营成本都不会雇佣的广告文案写手,这一现象导致网站建设项目中的很多广告图设计总是缺乏吸引力和转化率。那么,在没有广告文案参与广告设计的时候,我们设计师应当怎样处理好广告文案,做好广告图设计呢?今天我们就这一问题来浅谈一下互联网广告问题的写作方式与设计技巧。广告文案,顾名思义,指的是广告作品中的文字内容。一例广告作品会因其载体的不同而导致广告文案、表现形式产生各式各样的差异。在流媒体广告中,广告文案会以“对话”、“画外音”等形式配合动画出现,在平面媒体广告中,广告则通常会以

● 网站开发的流程一般有哪些点击统计:70 发布时间:2018-11-01 07:08:00

  当今社会,随着网络行业的发展,越来越多的公司把目标转到了线上业务,而想要在一众公司里面脱颖而出,建设一个漂亮专业的公司网站是关键,不仅能让顾客第一时间了解公司信息,如果你的网站足够漂亮,还能吸引到顾客为你的产品买单,但是许多人并不知道该如何运作,那么网站开发的流程到底是怎么样的呢?  1、网站规划  万事开头难,要想建立一个专业的网站,首要步骤就是做一个全面的规划,根据自己的喜好想好设计的大概方向,搭配时尚漂亮的公司关键词,力求吸引他人。  2、挑选域名  挑选域名可以说是网站开发

● 怎样去建设一家房地产网站?点击统计:70 发布时间:2018-10-31 02:21:41

  房地产在中国的经济中一直以来都起着重要的作用,特别是最近几年 的时间来,房价的疯涨让各大房产公司都赚到了不少的钱。现在房地产商又面临着新一轮的竞争,能够获得更多的网络流量对于提高销售额是件很有帮助的事情,那么应该怎么做房地产网站建设呢?  1、域名的选择  想要开发一个房地产网站的话最首先需要做的是起一个简短易记的域名,我们在对域名进行注册的时候,要与房产信息网站的logo,名字等信息相互协调,最为基础的就是要满足简单易记的原则。  2、开发和设计  在开发和设计网站的时候不管是哪
返回首页
返回首页
拨打电话
拨打电话
短信咨询
短信咨询