透明水晶边框css,CSS揭秘—

当我们在实现透明边框的时候，会遇到一些问题。在阐述这些问题之前，首先看看什么是透明边框，总的来说，就如下图所示。

透明边框.png

众所周知的是，一旦给一个元素设置了背景之后，那么这个背景所包含的区域是 content + padding + border。

按照一般的思路，我们要设置一个透明边框，首先会用到以下代码：

background: #FFF;

border: 10px solid rgba(255, 255, 255, .5);

如果是这么设置，不出意外我们会看到以下结果。

透明边框2.png

看上去我们像是没有设置这个边框，实际上这个边框是存在的，由于我们的边框设置的是透明的白色，而这个元素的背景也是白色，所以看上去就只有白色，所谓的透明边框也就不存在了。不过这只是特例情况，如果元素的背景不是白色，而是其它颜色，那么我们是可以看到这个边框的，不过这个时候就不再是透明边框，而是背景色+透明色的结合色。就比如设置以下代码。

background-color: orange;

border: 10px solid rgba(255, 255, 255, .5);

效果如下：

透明边框3.png

再次回到一开始以白色为背景的情况，为什么会出现透明边框消失呢？原因就是白色+透明色还是白色，那么我们能不能让背景色的渲染范围由 content+padding+border 变成 content+padding 呢？

解决这个问题的突破口是 background-clip 属性，它就是用来设置元素背景渲染范围的，有三个可选值分别是 content-box, padding-box, border-box。详情可以查看 CSS3 Background Clip

所以，为了得到一个令人满意的透明边框，我们的代码是

background-clip: padding-box;

background-color: #FFF;

border: 10px solid rgba(255, 255, 255, .5);

透明水晶边框css,CSS揭秘——透明边框相关推荐

html如何让框架的边框消失,css如何让边框透明？
透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让边框实现透明的最佳方案,运用RGBA设置. css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数, ...
css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
css常用的属性(边框三角形，文本省略号)
文章目录边框列表背景文本显示省略号边框边框相关属性 border-width 边框宽度属性值:length(数值+单位)例如 width:10px border-style 边框样式 ...
html中边框与边框距离,css边框border与margin属性
CSS边框属性: border不能分别定义4个边框的宽度,颜色和样式,只能统一定义,不可以对四个边设置不同的值,和margin与padding是不同的(后两者可以分别定义四个边的值). border- ...
CSS盒模型、边框和背景、表格和列表、颜色和透明度、阴影和轮廓及长度单位rem
1.CSS 盒模型元素尺寸 CSS 盒模型中最基础的就是设置一个元素的尺寸大小.有三组样式来配置一个元素的尺寸大小,样式表如下: 属性值说明 CSS版本 width auto.长度值或百分比设 ...
css中去掉input边框颜色,css怎么去掉input边框
li默认是块状元素,总是在新行上开始,占据一整行. 首页关于我们 < 2021-04-02 20:31:42 去掉input边框的具体操作步骤如下:1.在html页面中输入input的相关代码 ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
CSS 盒子模型、边框
CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的H ...
纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...

透明水晶边框css,CSS揭秘——透明边框

透明水晶边框css,CSS揭秘——透明边框相关推荐

最新文章

热门文章