codecamp

透明边框

原文出处:http://www.w3cplus.com/css3/css-secrets/translucent-borders.html

问题

现在,你对 CSS 中的半透明颜色可能已经有了基础的了解,比如 rgba() 和 hsla()。从 2009 年开始,虽然在开发设计中使用它们需要付出一些代价,比如提供降级措施、使用IE滤镜,但是总得来说它是一个巨大的变革。不过在实际中,它们主要被用于背景,有这么几点原因:

  • 早期的开发者没有意识到这些新属性就是类似 #ff0066 和 orange 的色彩,而是将它们看作是图片,所以仅用在了背景上。
  • 为背景提供降级方案比其他属性更简单。比如,可以直接使用单像素的半透明图片替代半透明背景。对于其他属性,则只能使用不透明颜色。
  • 在其他属性上使用半透明颜色,比如边框,并不简单,我们将在下文介绍原因。

CSS 编码技巧
多边框
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }