半透明边框与background-clip

时间：2022-11-10 17:13:18

　　在开始本章之前，我们要先简单介绍CSS中的半透明颜色。自2009年后，网页工作者们开始使用半透明颜色，如rgba()、hsla()。前者相信大家都很熟悉，不难理解其中将有四个参数，第四个参数则为透明度。而后者hsla()则是工业界的颜色标准，它包括了H：Hue(色调—— 用0或360表示红色，120表示绿色，240表示蓝色，也可取其他数值来确定其它颜色，一般取值范围为0~360)；S：Saturation(饱和度——取值为：0% - 100%)；L：Lightness(亮度——取值为：0% - 100%）；Alpha（透明度——取值0~1之间，如“.5”）。从中我们可以明白，要实现颜色的透明化，需要通过修改rgba()/hsla()的第四个参数来达到目的。

　　自从半透明面世以来其广受欢迎，但实际上大多数半透明颜色都运用在背景上；此外，由于考虑到浏览器我们需要在使用半透明颜色时需要做好回退方案。

　　到此，你也许已经初步了解了半透明颜色，那么接下来，我将进入本文正题（学习此章需要学习者掌握盒模型知识）。

　　试想，如果当我们想要让边框实现半透明颜色同时透出背景色我们该如何做呢？

　　首先，让我们试着为一个<div>元素设置半透明边框，如下：

<body>

    <!--为<div>元素设置半透明边框-->

    <div style="border:10px dashed rgba(225,225,100,.5);width:600px">

　　　　<p>学而时习之</p>

    </div>

</body>

　　其效果如下（图一）：

半透明边框与background-clip

　　

　　如上图，我们已经设置了透明边框，按理说，当边框有一定的透明度，其背景色也将会透过边框呈现出来，那么我们可以试着给这个<div>元素设置其背景颜色，如下：

<body>

    <!--为<div>元素设置半透明边框-->

    <div style="border:10px dashed rgba(225,225,100,.5);

             width:600px; background-color:red;">

        <p>学而时习之</p>

</div>

</body>

　　试着运行这段代码，你是否也得到了如下结果（图二）？

　半透明边框与background-clip

　　

　　嗯，边框已经透出了背景色，由于我们在设置半透明边框时也为其自身设置了颜色，参照图一，这时边框就像一个自带颜色的透明玻璃框，它盖在了“背景幕布”上面，最后透出了与“幕布”融合的颜色（有种调色的感觉呢）。但是，如果“背景幕布”下还有一层更大的“幕布”，这块带有颜色的透明玻璃框又会怎么做呢？

<body style="background-color:pink">

    <!--为<div>元素设置半透明边框-->

    <div style="border:10px dashed rgba(225,225,100,.5);

            width:600px; background-color:red;">

        <p>学而时习之</p>

    </div>

</body>

　　当然你也可以试着用<body>标签的背景图片来进行试验，上述代码我们则得到了以下效果（图三）：　半透明边框与background-clip

　　

　　嗯，看来我们可以得出我们的第一个结论了：<div>元素的透明边框透出的是该<div>自身的背景色，也就是说，当我们设置border为透明后，它将会透出其所属元素的背景色。

　　让我们回顾图二及其代码（如下），会发现我们将border线型设为了dashed，但此时<div>的背景色延伸到了哪里呢？

　　图二及其代码：

<body>

    <!--为<div>元素设置半透明边框-->

    <div style="border:10px dashed rgba(225,225,100,.5);

             width:600px; background-color:red;">

        <p>学而时习之</p>

</div>

</body>

半透明边框与background-clip

　　

　　没有错，你会发现，<div>的背景色延伸到了border处。但是，这是为什么呢？

　　如果你已经学习过盒模型了，那么我想你肯定会有所思绪的。上述问题，说白了就是希望背景色“乖乖待在”padding以内的区域的问题。那么要如何实现呢？看看我们这章的标题——半透明边框与background-clip，对的，就是利用background-clip属性。在我们的试验过程中，我们没有说明background-clip属性的属性值，但此时默认地，背景色延伸到了border处；但是如果我们设置一下它的属性值，又会怎样呢？

<body style="background-color:pink;">

    <!--为<div>元素设置半透明边框-->

    <div style="border:10px dashed rgba(225,225,100,.5);

         width:600px;background-color:red;background-clip:padding-box;">

　　　　<p>学而时习之</p>

    </div>

</body>

半透明边框与background-clip

　　

　　we did it !!!!!是的，当我们将background-clip属性的值设为padding-box后，我们解决了“如何让背景色乖乖待在padding以内的区域”的问题。结合前文，我们知道在默认情况（不设置background-clip属性）下，背景延伸会延伸到border处，这就说明实际上此时background-clip属性有一个默认的值，没错，就是“border-box”。由此，我们可以得出我们的第二个结论：background-clip属性说明背景延伸至何处，如果不设置这一属性那么默认情况下其属性值为“border-box”，此时背景色将延伸至border边缘；但是当其属性值为“padding-box”时，背景色将延伸至padding区边缘。

　　通过设置background-clip为padding-box，我们可以令元素自身的背景色只延伸至padding区边缘，从而令透明的border透出更底下的颜色或者图片，这就是我们想要使用半透明边框的真正目的，也就是这样的效果：

半透明边框与background-clip

　　上图效果的代码如下：

<body style="background-image:url('mm93.png');">

    <!--为<div>元素设置半透明边框-->

    <div style="border:40px solid rgba(225,225,100,.5);

         width:200px;height:200px;margin:60px;background-color:red;background-clip:padding-box;">

　　　　<p>学而时习之</p>

    </div>

</body>

　　以下就是我们今天解决的三大问题：

半透明边框与background-clip

　　

　　

半透明边框与background-clip的更多相关文章

  1. css rgba&sol;hsla知识点讲解及半透明边框

    一.RGBA(R,G,B,A) 参数: R:红色值.正整数 | |百分数 G:绿色值.正整数 | |百分数 B:蓝色值.正整数 | |百分数 A:Alpha透明度.取值0~1之间. 说明:此色彩模式与 ...

  2. CSS揭秘-半透明边框与多重边框

    场景一: 实现半透明边框: 由于CSS样式的默认行为,背景色的渲染范围是 content+padding+border. 半透明边框被主调色影响, 实现的效果为   解决方案: 使用backgroun ...

  3. &lbrack;css 揭秘&rsqb;：CSS揭秘 技巧（一）：半透明边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在上面哦 喜欢的给我一个星吧 半透明边框 css 中的半透明颜色,比如用 rgba() 和 h ...

  4. Android Activity 悬浮 半透明边框

    1.首先来创建一个Activity,在Activity的OnCreate函数里面我们设置它为全屏,然后设置Activity的宽高为全屏*0.9,然后设置背景图片为半透明的 .9 图片 .这样就已经是非 ...

  5. css半透明边框

    html <div class="parent"> <div class="translucent">I am Bob</div& ...

  6. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  7. css使用rgba&lpar;&rpar;或hsla&lpar;&rpar;设置半透明或完全透明边框border

    在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性.这篇文章就简单介绍下使用这2种方式来实现半透明边框. 1.使用rgba方式: border: 10px solid rg ...

  8. Css3新特性总结之边框与背景（一）

    本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%) ...

  9. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

随机推荐

  1. 关于margin的问题

    昨晚是第一天,现在来说说margin的这个存在的问题吧, 嗯,就是当你碰到 <div class="max-box"> <div class="box1 ...

  2. JAVA 加减乘除

    package homework; import javax.swing.JOptionPane; public class suanshu { public static void main(Str ...

  3. selenium python （十三）对于分页的处理

    #!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #对于web上分页的功能,一般做如下操作:    #获取总页数    # ...

  4. Spring配置静态目录

    mvc-dispatcher-servlet.xml文件 <beans xmlns="http://www.springframework.org/schema/beans" ...

  5. mysql存储过程及常用函数

    原文:mysql存储过程及常用函数 一.函数 1.数学函数 CEIL()进一取整 SELECT CEIL(1.2);2 FLOOR()舍一取整 SELECT FLOOR(1.9);9 MOD取余数(取 ...

  6. 门控开关项目--整流桥分析，LED限流电阻选择

    完整的原理图 常见电阻 常见的精度分为5% 和1%精度,碳膜电阻5%精度,金属膜电阻1%精度. 常见的阻值有 10R, 100R, 330R, 1K, 2K, 3K, 5.1K, 10K, 15K, ...

  7. ace&lowbar;tree总结。各类问题解决办法汇集

    首先讲一下怎么使用,然后讲一下出现的问题的解决办法 1.引用js和css文件 ace-extra.min.js.ace.min.css.fuelux.tree.min.js.ace-elements. ...

  8. 处理文件中的&quot&semi; M-BM- &quot&semi;特殊符号

    有时为了方便,会在Excel中进行代码拼装,比如说是建表SQL语句,但是在复制的代码过程中可能会带入不可见字符,造成代码无法运行. 本次代码中就需要了不可见的" M-BM- " 问 ...

  9. Given d and e&comma; factorize N to attack RSA

    题目如下: RSA算法的使用一般要求每个不同的用户有一个独立的模数N.有天,Bob脑洞大开,认为似乎没有必要这样做.只需要一个模数N,然后给不同的用户分发不同的e和d就好了.可惜这种做法有严重的安全漏 ...

  10. 【洛谷P1330】*阳光大学

    题目大意:给定一个 N 个点,M 条边的无向图,现在要选出图中的一个顶点集合,使得集合种的顶点不直接相邻,且这张图的所有边都被该顶点集合覆盖,求该顶点集合大小的最小值,若不能完成覆盖,则输出 impo ...

相关文章