帮助文档Help

探究CSS边框特效实现技巧

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

本文为大家分享了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

28
04月
php+xml实现在线英文词典之添加词条的方

本文实例讲述了php+xml实现在线英文词典之添加词条的方法。分享给大家供大家参考。具体如下:接着上一篇《php+xml实现在线英文词典查询... >>详情

21
04月
css布局之BFC模式(block form

详解BFC【 block formatting context】BFC这个东西说常见的话你可能不觉得,但是你肯定会常用到,也许你在用的时候也... >>详情

14
06月
手机网店系统终极版免费安装

手机网店系统终极版免费安装网站介绍:该网站为常用手机网店,演示站内容为手机网购.通过ecshop整合. 下载安装后选择BigSale模板.需... >>详情

17
01月
网站建设好之后,怎样提高网站流量?

282018-06 网站建设好之后,怎样提高网站流量? 第一种方法:友情链接找一个行业相关的网站添加... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站