CSS3制做半全透明边框(Facebox)相近渐变色

日期:2021-03-11 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

CSS3制做半全透明边框记得之前Facebook有段時间应用了十分多的半全透明边框(Facebox),尽管如今不适用了,可是還是值得科学研究1下。
  
你有将会感觉这样写就可以了: 折叠进行CSS Code拷贝內容到剪贴板 

拷贝编码
编码以下:

#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }

 但是白色情况会1直外扩散到边框上,变为以下的模样:
 还好大家有CSS3的background-clip特性 CSS Code拷贝內容到剪贴板 

拷贝编码
编码以下:

#lightbox { -moz-background-clip: border; /* Firefox 3.6 */ -webkit-background-clip: border; /* Safari 4? Chrome 6? */
background-clip: border-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ -moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */ background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
-moz-background-clip: content; /* Firefox 3.6 */ -webkit-background-clip: content; /* Safari 4? Chrome 6? */
background-clip: content-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */ }
 
实际以下
 
假如大家把background-clip设定成padding-box,那border就不容易被危害。
   
}
有关內容: background-origin顺带详细介绍1下和background-clip定义相近的特性:background-origin,它的作用便是界定情况照片左上的座标 事例以下:  
访问器适配:Works in: Safari 5, Chrome 7, Firefox 3.6+, Opera 10, IE 9