期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

css3边框之半透明边框 background-clip属性

作为初学者的我们,对css中半透明颜色的设置的了解大概只有rgba(),hsla()也是其中的一种方法.在实际中,他们应用于背景的原因有一下几点:

1、早期的开发者没有意识到这些新属性就是类似#ff0066和orange的色彩,而是将他们看作是图片,所以仅用于背景;

2、位背景提供降级方案比其他属性简单;

3、在边框这些属性上使用半透明颜色并不简单.

我们一般设置边框的第一步:

border:10px solid hsla(0,0%,100%,.5);

background:white;

按常理来说这样设置是可以得到透明边框的,但是实际中却根本看不到边框的存在.虽然看起来的效果和预期有所差异,

其实边框是存在的.实际上,背景色默认扩展到边框上,这一点是可以通过给边框添加虚线观察到.

我们可以使用background-clip属性来调整这一效果,也就是说,背景色会填充到容器边框以内的地方,所以我们只需要将其

修改为padding-box(让背景色在容器的内边距以及内边距以内填充)就可以实现效果了:

border:10px solid hsla(0,0%,100%,.5 );

background:white;

background-clip:padding-box;

虽然在border-color上能运用rgba(),hsla()设置边框为半透明或完全透明,如果元素设置了背景颜色或背景图片的时候,会直

接影响边框的透明颜色效果.特别是,要看到边框底下的内容时.造成这个现象是由于图片会延伸到边框底部.可以用css3的background-clip

来修正。

完整代码:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>      <style type="text/css">      	body{      		background: darkolivegreen;      	}      	#dd{       width: 200px;       height: 70px;       border:10px solid hsla(0,0%,100%,.5 );  	 background:white;  	 background-clip:padding-box;  		}		      </style>  </head>  <body>  <div id="dd">css3边框之半透明边框</div>  </body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册