香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

探究CSS边框特效实现技巧

一佰互联网站制作(www.yinxi.net) 发布日期 2019-04-21 17:24:56 浏览数: 44

本文为大家分享了CSS边框特效实现技巧,供大家参考,具体内容如下

一、半透明的边框实现

加入我们有这样一个需求:在一个背景图片的区域中,定义一个带有半透明白色边框的白色div。这个的实现方法最先想到的就是可以为边框定义透明度,代码如下:

CSS Code复制内容到剪贴板
  1. div{   
  2. background:white;   
  3. border:20px solidhsla(0,0%,100%,.5);   
  4. }  

这里hsla为一种定义颜色的方法,它的各个参数含义如下:

H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

S:Saturation(饱和度)。取值为:0.0% - 100.0%

L:Lightness(亮度)。取值为:0.0% - 100.0%

A:Alpha透明度。取值0~1之间

 在浏览器中运行上述的样式设定,发现其实并没有出现我们想要的结果。div还只是一个没有任何边框效果的纯白色div。

 这个问题出现的原因是:白色的div挡住了半透明的白色边框。因为如果为一个div设定为白色,那么这个div的盒子模型整个颜色都是白色的。如果设定了半透明的白色边框,放到这个白色的div中是显示不出来的(被div的白色衬托的没有办法显示出边框)。

要想解决这个问题,需要用到CSS3中的新属性——background-clip。background-clip规定了背景的绘制区域:

border-box         背景被裁剪到边框盒 

padding-box      背景被裁剪到内边距框            

content-box       背景被裁剪到内容框 

默认情况下,background-clip的值为border-clip,也就是说整个和模型都应用定义的背景,在我们上面的例子中也就是整个div一直到边框外围都是白色。所以如果我们将background-clip属性值设定为padding-box,即可将外部的边框不填充颜色,就能显示出设定的半透明边框了,代码如下:

CSS Code复制内容到剪贴板
  1. div{   
  2.        background:white;   
  3.        border:20pxsolid hsla(0,0%,100%,.5);   
  4.        background-clip:padding-box;   
  5. }  

这样设定的样式在浏览器中重新运行,就会出现预想的白色半透明边框效果了。

二、多重边框

有的时候为了元素的特别效果,可能需要为元素添加多重的边框,下面介绍两种添加多重边框的方法。

1.box-shadow

box-shadow属性可以为盒模型设定投影。但是其实它还有设定边框的功能。

box-shadow可以传递五个参数,前两个参数表示投影的偏移量,第三个参数表示投影的模糊程度,第四个参数表示投影的扩张度,最后一个参数表示投影的颜色。然而我们平常很少用到第四个参数,在这里使用第四个参数,就可以让投影进行扩张,通过设定比较合适的值,就可以模拟出边框的效果了。

同样,box-shadow属性可以传入多个阴影的列表,用“,”分割即可。因此,只要我们定义一个阴影列表,并且递增的增加其扩张度参数的取值,就可以绘制出多重边框的效果了。

2.outline

如果我们只需要绘制两层边框,使用outline也可以做到。outline是border外面的一层,和border原理一样。通过设定outline的样式可以为border外面再设定一层边框。

但是需要注意的是,outline属性设定的边框不会随着内部元素边界样式的变化而变化。也就是说,如果元素边框带了圆角,那么outline绘制出的最外层边框仍然是矩形的。这是outline绘制边框的一个缺憾。

以上就是本文的全部内容,希望大家能够熟练掌握CSS边框实现技巧,谢谢大家的阅读。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

09
04月
无代码动效神器!教你用Hype3做APP原型

@Akane_Lee :这篇是最简单的过场设定、最偷吃步骤、不需要技术,只要会写简报 PTT 或是 Keynote 就做的出来,所以连 Pl... >>详情

05
04月
用建站宝盒模版自由设计幼儿园学校门户网站案例

用建站宝盒模版自由设计幼儿园学校门户网站案例即将发布 高品质自定义效果,无需编程,不需代码拖拉式布局设计。完美展现建站宝盒给新手建站带的无穷... >>详情

27
03月
微博超话阅读超12亿,网易这款小众题材手游如

简介:“第五皮格”。文/迪亚菠萝包网易在运作无IP的游戏上有一些成功的经验,最典型的案例莫过于2016年《阴阳师》的社会化营销,此后网易似乎... >>详情

27
03月
今日头条「企业认证」开放申请

简介:头条号「企业认证」于2017年12月18日正式开放申请,经认证的企业头条号将享有官方认证标识、商家主页、卡券、舆情监测等专属权益。该服... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号