为企业提供全套定制解决方案,
涵盖网站建设/SEO优化/营销推广/技术开发
湖北建站公司:网页前端开发技巧之细边框有哪些写法?,网站建设的需求随着互联网的日益发展必然会越来越大,同时对网站建设的要求也会越来越高,如何成功完美的设计一个优秀的网站,首先要具备的是清晰的思路。怡橙科技针对此问题分析一下“网页前端开发技巧之细边框有哪些写法?”的相关知识内容!
多年专注网站建设与营销推广
-
网站优化
客户指定关键词,不要求增加长尾词,精准词流量高。
-
网站设计
侧重品牌调性传递,交互体验设计,功能应用开发,营销活动转化等定制服务最大化传递目标价值。
-
全网营销
采用智能平台化操作,操作简单,系统数据分析,效果一目了然,并通过大量的数据分析优化,广告效果。
-
软件定制
服务覆盖实体企业互联网+开发,创业公司运营产品开发,企业产品线开发,多场景。
我们在进行网页开发时,经常会遇到一些1的细边框或细线条。比如下图的列表页面,每行列表之间的灰色细线条分隔线。
网页前端开发技巧之细边框的几个写法
一般的边框描边的线都小于一像素,那么我就像往常一样直接描了1的边框,虽然是1可是结果和里的描边完全不一样“粗了”,所以就需要一些技巧来解决这个问题。
1,做一张高2像素(1像素有颜色1像素没颜色)的图片做背景,-设置宽100%,高1
.{
:('.')-;
-:100%1;
-:;}
&;=""&;
&;&;&;/&;
&;&;&;/&;
&;&;&;/&;
&;/&;
这个方式可以,但有点瑕疵,那么问题来了,左右边框描边虽然可以做旋转(),但如果要是边框更换颜色那不是还要在做图片了,好像是有点麻烦哦;
2,所以用上个方法联想到了线性渐变(-)
.{:;
-:---(#22250%,50%);
-:---(#22250%,50%);
-:---(#22250%,50%);
-:-(#22250%,50%);
-:100%1;
-:-;
-:;}
&;=""&;
&;&;-&;/&;
&;&;-&;/&;
&;&;-&;/&;
&;/&;
这个方式还是有点瑕疵,改变描边位置(,,,)需要修改参数。
如描边需要改变:
-:---(,50%,#22250%);
-:1100%;
-:;
都不一一列出了,好像还是有点麻烦;
3,用3阴影(-),就是用阴影做描边然后用伪类把多余的给遮罩着,
.{-:0-11#000;:#;-:-1;-:10;:;}
.::{:'';:;:0;:0;:0;:0;:1#;}
&;=""&;
&;&;-&;/&;
&;&;-&;/&;
&;&;-&;/&;
&;/&;
,这样子好多了。到底用哪一种好呢,这都是因人而异,我只不过是给出了这些方案,仅供大家参考,具体的方案还需要大家在各自的项目中根据具体情况来决定。
湖北建站公司:网页前端开发技巧之细边框有哪些写法?
以上内容就是关于“网页前端开发技巧之细边框有哪些写法?”的相关知识内容!,怡橙科技网站建设一站式服务:武汉网站设计制作、公司网站建设、高端网站设计、网站托管维护,助您轻松获取解决方案。想要了解更多“网页前端开发技巧之细边框有哪些写法?”的信息,请致电专业商务经理,电话:400-960-5068!
上一篇:湖北建设网站公司:浅谈制作视频的注意事项以及如何进行视频推广
下一篇:下一篇详细