文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】599- 9个很棒的CSS边框技巧

    如果您是前端开发人员，那么几乎每天都会使用CSS边框。我发现了一些可以在您的项目中使用的有用的技巧。 开始吧！ 1. 动画CSS边框 当我们想使我们的项目更可见时，该怎么办？ 来给它做个动画！...CSS图像边框 你是否曾经想象过你的元素周围有甜甜圈？ 现在，你无需过多的编码即可通过纯CSS添加它们。 为此，你需要在元素的CSS代码中使用 border-image 属性。...边框 有时我们需要在现成的设计中添加边框，但添加更多像素会有些问题，它可能改变元素的位置。...CSS边框 我们也可以混合一些 box-shadow 和 outline 的边框。...边框 如果我们想给边框加上比前面的示例更多的颜色怎么办？

    2.7K10

    CSS多边框的几种实现方法

    css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果，并且可以设置多组效果，每组参数值用逗号隔开。...如果把box-shadow特性的两个偏移量 h-shadow 、v-shadow设置为0，将模糊值blur也设置为0，此时增加扩张半径，就会使元素的投影变为实线边框。...y-shadow：设置对象的阴影垂直偏移值，单位可以是px、em或百分比等，允许负值。 blur：用于设置边框阴影半径大小。 spread：扩展半径，设置阴影的尺寸；这个参数可选，缺省时值为0。...outline实现 如果我们只需要2层边框，那么使用outline是不错的选择，先设置常规的border边框，再加上outline（描边）。...而且outline比上面的box-shadow还有一大优点就是，可以生成虚线等边框。通常outline属性需要和对应的描边偏移outline-offset来实现。

    2.3K20

    Excel公式技巧90：剔除单元格区域中的空单元格

    有时候，在一列数据中有许多空单元格，导致数据不连续，我们需要剔除这些空单元格，让数据区域连起来。 如下图1所示，在单元格区域A1:A15中输入了一些数据，但其间有许多空白单元格。 ?...图1 在单元格D1中，输入数组公式： =IFERROR(INDIRECT("A" & SMALL(IF(LEN(A15)=0,"",ROW(1:15)),ROW(A1))),"") 然后，向下复制直至出现空白单元格为止...公式的核心部分是： SMALL(IF(LEN(A1:A15)=0,"",ROW(1:15)),ROW(A1)) 首先，获取单元格区域A1:A15中每个单元格内数据的长度：LEN(A1:A15)，看其是否为...0：LEN(A1:A15)=0，如果为0，则表明该单元格为空，返回一个空值，否则返回该单元格所在的行号：IF(LEN(A1:A15)=0,"",ROW(1:15))，对于本例来说，返回数组：{1;””;...接着，对于第一个公式来说，ROW(A1)返回1，即获取该数组中最小的值，即1。 然后，使用INDIRECT函数获取第1个非空单元格的值： INDIRECT(“A” & 1) 即单元格A1中的值。

    6K20

    Excel技巧：使用上方单元格的值填充空单元格

    有时候，工作表列中有许多空单元格，而不是在每行都重复相同的内容，这样可以使报表更容易阅读，然而也会导致一些问题，例如不方便排序或筛选数据。...如下图1所示，在列A中有一些空单元格，如果对列A进行筛选，则只会出现有内容的单元格数据，因此空白单元格需要使用其上方单元格的内容填充。...图1 首先，选择包含空单元格的列，单击功能区“开始”选项卡“编辑”组中的“查找和选择——定位条件”，在弹出的“定位条件”对话框中勾选“空值”前的单选按钮。...然后，输入=号，按向上箭头键选择上方单元格，再按Ctrl+回车键，在所有被选择的单元格中输入公式。 最后，选择列A，复制数据，然后在所选列中单击右键，选择“粘贴值”命令。...完整的操作过程如下图2所示。 图2 如果你经常遇到填充空单元格的操作，那么可以使用宏来代替手工操作。

    5.8K30

    CSS实现多重边框的5种方式

    前言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其他的方案。...优缺点： 只能实现双重边框 边框样式灵活，可以实现虚线等样式的边框 描边在盒模型之外，会与外部元素发生重叠 利用额外的div 利用额外的DIV嵌套的方式实现多重边框。...优缺点： 兼容性好 可以实现多重边框，虚线边框等样式 需要额外的DIV元素，增加了代码复杂性 利用伪元素 利用伪元素（:before）的方式实现双重边框。...优缺点： IE6,7,8不兼容 用:after也可以 同时应用:before和:after可以实现三重边框 利用border-image属性 利用CSS3的border-image属性实现多重边框。...repeat表示四条边都在相应的边框上重复的平铺。 利用box-shadow属性 利用box-shadow属性实现多重边框。方案5是最简单，最直接的实现多重边框的方式。

    1.7K40

    Excel公式练习32： 将包含空单元格的多行多列单元格区域转换成单独的列并去掉空单元格

    本次的练习是：如下图1所示，单元格区域A1:D6中是一系列数据，其中包含空单元格，现在要将它们放置到一列中，并删除空单元格，如图中所示的单元格区域G1:G13，如何使用公式实现？ ?...*"})) 统计单元格区域A1:D6中非空单元格的数量。并将该单元格作为辅助单元格。...因此，如果结果大于单元格F1中的值，则公式结果为空，否则执行IF语句的第2部分。...直接在单元格G1中输入，然后下拉至得到的结果为空为止。...这个公式的缺点是，当下拉很多行时，如果有许多行都为空，则仍会进行很多的计算，占有资源，不会像前面给出的公式，第一个IF判断为大于非空单元格值后，直接输入空值。有兴趣的朋友可以仔细研究。

    3.8K10

    CSS3实现多样的边框效果

    半透明边框 实现效果： 实现代码： 你能看到半透明的边框吗？...，这是还看不到半透明边框，因为默认情况下，背景会延伸到边框所在的区域下层，也就是背景是被边框的外沿框裁切掉。...通过设置 background-clip: padding-box （初始值是 border-box） 让背景不要延伸到边框所在的区域下层，也就是让内边距的外沿来裁切背景。...一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。而借助 box-shadow 支持逗号分割语法，可创建任意数量的投影，因此我们就可实现多重边框效果。...边框内圆角 实现效果： 实现代码： 我有一个漂亮的内圆角 div { outline: .6em solid #655; box-shadow: 0 0 0 .4em

    1.2K10

    CSS实现最简洁的四角边框

    在前端有一句古话，叫能用CSS实现的就别麻烦JS，因为声明式的配置语言CSS相比于自由式的编程语言JS，更容易被编译器所优化，比如css渲染引擎会优先考虑gpu加速，因此CSS动画的性能往往高于JS动画...，本文介绍在不需要html和js的配合的情况下，用纯css实现一个好看的四角边框。...用最节能的代码实现如图所示的，在大数据报表中非常常见的四角边框，有点类似Unicode中的制表符和直角括号：⌜ ⌝ ⌞ ⌟，有很多种办法来实现它，但最简洁的是利用边框图像（蒙版）+径向渐变（底图）来实现...，其中径向渐变的椭圆的直径要略大于元素盒子的边长，椭圆内全透明，椭圆外则使用边框的颜色，径向渐变图在盒子中是长这样的： 通过调整椭圆的长轴和短轴来改变四角的长度，最后利用边框蒙版将不需要的部分盖住即可...所以说，能用CSS就别麻烦JS，JS有更重要的事情要做。

    6.8K71

    Excel公式练习33： 将包含空单元格的多行多列单元格区域转换成单独的列并去掉空单元格（续）

    本次的练习是：这个练习题与本系列上篇文章的练习题相同，如下图1所示，不同的是，上篇文章中将单元格区域A1:D6中的数据（其中包含空单元格）转换到单独的列（如图中所示的单元格区域G1:G13）中时，是以行的方式进行的...*"})) 统计单元格区域A1:D6中非空单元格的数量。并将该单元格作为辅助单元格。...*COLUMN(rngData)+ROW(rngData)),ROWS($1:1)),"R00000C00000"),{8,2},5)),"R00000C00000"),0)) 向下拖拉至出现空单元格为止..."),{8,2},5) 应该获取单元格C2中的值，即数据区域的第2行第3列。...相关参考 Excel公式练习32：将包含空单元格的多行多列单元格区域转换成单独的列并去掉空单元格 Excel公式练习4：将矩形数据区域转换成一行或者一列

    3.5K10

    【基础】CSS实现多重边框的5种方式

    简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性，但如果要兼容老的浏览器，则需要选择其它的方案。...[CSS多重边框] 1 利用描边(outline)属性 方案1利用描边(outline)属性结合border属性实现双重边框。此方案实现简单，兼容性好，能兼容除IE6,7以外的浏览器。...] 演示程序 1.3 说明 只能实现双重边框 边框样式灵活，可以实现虚线等样式的边框 描边在盒模型之外，会与外部元素发生重叠 2 利用额外的DIV 方案2利用额外的DIV嵌套的方式实现多重边框。...] 演示程序 3.3 说明 IE6,7,8不兼容 用:after也可以 同时应用:before和:after可以实现三重边框 4 利用border-image属性 方案4利用CSS3的border-image...6 参考 MDN border-image MDN box-shadow Multiple Borders with CSS CSS-tricks Multiple Borders 7 结语 本文简述了

    2.1K50

    恼人的空单元格，怎么查找，有很多办法

    图1 现在，我们需要获取这个列表中的第一个非空单元格，即单元格B6中的值。...然而，这个公式只是适用于第一个非空单元格的值是文本数据的情形。如果第一个非空单元格的值不是文本数据，它会返回第一个文本数据单元格的内容。...如果第一个非空单元格包含是可能不是文本数据，那么就要使用下面的公式。 公式2：经典的INDEX/MATCH函数 下面的公式适用于非空单元格为任意数据的情形。...公式的原理很简单：ISBLANK(B3:B22)返回一个包含TRUE/FALSE值的数组，其中TRUE值表明单元格为空，FALSE值表明单元格含有值。...找到第一个非空单元格，你还有其他公式吗？ 你能找到第二个非空单元格吗？ 怎样获取最后一个非空单元格？ 欢迎留言分享。

    2.6K20

    CSS进阶11-表格table

    在可视化媒体中，CSS表格也可以用来实现特定的布局。在这种情况下，开发者不应该在文档语言中使用与表格相关的元素，而应该将CSS应用于相关的结构元素以实现所需的布局。...开发者可以将表格的视觉格式指定为矩形网格单元格。单元格的行和列可以组织成行组和列组。行，列，行组，列组和单元格可以在它们周围绘制边框（CSS 2.2中有两个边框模型）。...在下面的示例中，第一行包含四个非空单元格non-empty cells，但第二行仅包含一个非空单元格，因此表格背景会被穿透展示，除非第一行的单元格跨越此行。以下是HTML代码和样式规则： 的值为'show'时，在空单元格周围/背后绘制边框和背景（像普通单元格一样）。 'hide'的值表示在空单元格周围/后面没有绘制边框或背景（参见17.5.1中的点6 ）。...下表显示了表格的宽度，边框的宽度，填充和单元格宽度如何相互作用。它们的关系由以下等式给出，该等式适用于表的每一行： ?

    9.6K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券