使用 CSS 扩展边框

2024-04-17

我一直在测试使用一些嵌套 div 扩展/投影边框的想法,下面有一个工作示例。

基本上,我想要实现的是垂直和水平边框延伸到盒子外面,里面有内容。有点像起草的样子。如果可能的话,我希望它能够完全响应。

在我的代码中,我设置了带有负边距的高度,以便获得我正在寻找的视觉效果,但对于我想要做的事情来说,我的标记似乎太臃肿了。这是反应灵敏水平方向,但垂直方向我只是隐藏了溢出。

这样做时我想到的另一个想法是有 4 个 div,每个边框边(上、右、下、左)各 1 个,然后将每个 div 偏移一定量以达到效果。有点像“摇晃”的 div 簇。这 4 个 div 将由父容器携带并且具有响应能力。

这可以比我在小提琴中做的更简单吗?有没有办法让它在垂直和水平方向上都灵活(完全响应)?是否可以对每个边框进行可变扩展(例如一侧为 2px,另一侧为 4px)?

废话不多说,以下是我目前所掌握的内容:

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /* text-align: center; */
}

.container {
  margin: 50px auto 0;
  padding: 0;
  width: 75%;
  height: 200px;
  position: relative;
}

.box-vert {
  margin: -10px 0;
  padding: 0;
  overflow: visible;
  height: 200px;
  position: absolute;
  border: 1px solid #C5C5C5;
  border-top: none;
  border-bottom: none;
}

.box-horz {
  height: 180px;
  margin: 10px -10px;
  overflow: visible;
  border: 1px solid #C5C5C5;
  border-left: none;
  border-right: none;
  padding: 0;
}

.box-inner {
  margin: 0 10px;
  padding: 20px;
  background-color: #ECECEC;
  height: 140px;
  float: left;
  overflow: hidden;
}

.box-inner h1 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 3px;
  font-size: 30px;
  color: #009688;
}

.box-inner p {
  margin: 0;
  line-height: 1.4;
  font-size: 14px;
  color: #666;
}
<div class="container">
  <div class="box-vert">
    <div class="box-horz">
      <div class="box-inner">
        <h1>Title Text Here</h1>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper.</p>
      </div>
    </div>
  </div>
</div>

您可以使用单个元素和背景渐变来完成此操作,如下面的代码片段所示。输出是响应式的(正如您在完整页面视图中看到的那样),并且可以根据内容的大小进行自我调整。

该方法有点复杂,因为它是使用单个元素完成的,因此这里有一个解释:

  • 在元素的所有边上添加 15 像素的填充,以便将文本流限制在较小的区域(即,在我们要创建的边框内)。
  • 添加 4 个线性渐变背景图像(每个边框一个),并将其背景大小设置为每个边框的厚度为 1px,但宽度/高度为 100%。
  • 对于顶部和底部边框,厚度/高度为 1px(或我们需要的任何值),边框的宽度将与容器的宽度相同,因此background-size被设置为100% 1px.
  • 对于左右边框,厚度/宽度为 1px,高度为容器高度的 100%,因此background-size被设置为1px 100%.
  • 然后定位这些渐变线,使其在父级内部有一定的偏移量。也就是说,顶部边框应该在 y 轴上偏移 10px(或者我们需要的任何值,但它应该小于填充),左边框应该在 x 轴上偏移 10px。同样,底部和右边框应从容器的底部和右边缘偏移 10px,因此calc函数用于定位它们。
  • 对于元素的背景,我们不能使用简单的background-color使用这种方法,因为它会填满整个 div (超出边界)。我们甚至不能使用背景剪辑,因为这也会剪辑边框。因此,我们必须再次使用线性渐变,其大小小于容器的尺寸,减去所有边的填充量。所以,这个渐变的背景大小是calc(100% - 20px) calc(100% - 20px)位置也应相应抵消。
  • 可以通过更改渐变的颜色来更改边框和背景颜色。
div {
  padding: 15px;
  margin-bottom: 10px;
  line-height: 1.4;
  font-size: 14px;
  color: #666;
  background: linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#C5C5C5, #C5C5C5), linear-gradient(#ECECEC, #ECECEC);
  background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%, calc(100% - 20px) calc(100% - 20px);
  background-position: 0px 10px, calc(100% - 10px) 0px, 0px calc(100% - 10px), 10px 0px, 10px 10px;
  background-repeat: no-repeat;
}

/* Just for demo */

h1 {
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: 200;
  letter-spacing: 3px;
  font-size: 30px;
  color: #009688;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Helvetica, Arial, sans-serif;
  /* text-align: center; */
}
<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

<div>
  <h1>Title Text here</h1>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</div>

如果您需要在每一侧进行可变扩展,只需根据以下逻辑更改填充、背景大小和位置:

  • 假设您需要边框在顶部延伸 6 像素,在右侧延伸 8 像素,在底部延伸 10 像素,在左侧延伸 12 像素,并且边框和文本之间有 4 像素的空间。然后使用以下逻辑设置填充。

    padding: [border-ext-top + space-between-borders-n-text]
             [border-ext-right + space-between-borders-n-text]
             [border-ext-bottom + space-between-borders-n-text]
             [border-ext-left + space-between-borders-n-text];
  • 背景图像渐变(产生边框)设置为遵循与填充相同的右上-左下顺序。所以,设置background-position如下。

    background-position: 0px [border-ext-top], 
                         calc(100% - [border-ext-right]) 0px, 
                         0px calc(100% - [border-ext-bottom]), 
                         [border-ext-left] 0px, 
                         [border-ext-left] [border-ext-top];
  • Since padding and background-position更改后,创建内部填充的渐变大小也应更改,以免溢出边框。

    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%,
                     calc(100% - [border-ext-left + border-ext-right]) calc(100% - [border-ext-top + border-ext-bottom]);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 CSS 扩展边框 的相关文章

  • 一行总结详细信息? [复制]

    这个问题在这里已经有答案了 我希望页脚内的详细信息成行显示 现在每个详细信息都显示在新行上 我怎样才能让它与 CSS 一起工作
  • MouseOver 不会在重叠的 div 上冒泡?

    使用 jQuery 2 1 Meyer 2 0 CSS重置脚本 http meyerweb com eric tools css reset 针对 IE9 和现代浏览器 我制作了两个重叠的 div 我在听mouseover and mous
  • 使用 Java 处理 HTML(多部分表单数据)文件上传

    我正在为概念验证 Web 应用程序开发多文件上传解决方案 我正在使用 java servlet 来处理 AJAX 文件上传 我的问题是java如何处理从HTML表单上传文件 如果有人可以解释如何处理基本的 HTML 文件上传 那么我可能可以
  • rvest如何通过id选择特定的css节点

    我正在尝试使用 rvest 包从网页中抓取数据 简单来说 html 代码如下所示 div class style div
  • Anchor Cycler / 下拉菜单定期导入学校班级数据

    SO 我最近一直在研究一些 html javascript css 为我的学生创建一个在线表格来查看详细信息 分数和各种信息 但我遇到了困难 不确定如何做我正在尝试的事情去做 我将所有这些内容发布在一个线程中的原因是因为我认为其中几个可能会
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 将 HTML 表格结构复制到剪贴板

    我只是在寻找这方面的建议 我一直在互联网上寻找可能的解决方案 了解如何将 HTML 表格结构及其文本复制到剪贴板 但到目前为止还没有那么幸运 我现在拥有的是一个包含数据的简单表格 用户需要在复制 粘贴时使用 Outlook 将其复制到电子邮
  • 最小高度:自动在 Opera 中不起作用

    我注意到min height不在 Opera 中工作 我正在尝试这样的事情 div class content div div class content newstyle div 我的 CSS 代码是 content min height
  • 为什么 inline-block 会根据子元素的宽度自动调整宽度?

    如果这个问题已经在 stackoverflow 上提出过 请纠正我 如果确实如此 我深表歉意 但我已经寻找了一段时间并且只找到了hows not whys 我的问题是 父 div 似乎会自动占据页面的整个宽度 除非 display inli
  • 的 CSS margin-top 影响父级的边距

    我已经研究这个问题有一段时间了 但还没有找到直接的答案 当向元素添加页边距顶部时 就我而言 它主要发生在标题上 在许多情况下 边距顶部是与父级共享的 HTML div h1 My title h1 div CSS div padding 2

  • jQuery:如何将 jQuery 日期选择器放入 Bootstrap Popover 中? [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 我试图在引导弹出窗口中显示 jquery datepicker 并尝试了解决方案引导程序弹出窗口内的日期选择器 关闭 https
  • 自定义 Vim HTML 语法

    我有一个脚本可以读取 HTML 文件并替换出现的 foo 具有 Perl 设置的值 像这样的东西 span class hi mom span 会在浏览器中产生类似这样的内容 span class classyclass Hello Wor
  • css 表格单元格,内容有不必要的上边距

    我在代码中使用 div 块的表格单元格排列 我的代码有问题 我的 html 的预览是here http jsbin com avozik 10 edit preview 当我的第一个面板中有任何内容 文本或图像 时 inner第二个和第三个
  • HTML5 数据库存储(SQL lite) - 几个问题

    你好 我在网上找不到足够的关于 HTML5 数据库存储使用示例 CRUD 的初学者资源 我正在像这样打开 创建 我的数据库 var db document ready function try if window openDatabase
  • 数据协议 URL 大小限制

    data URL 方案是否有大小限制 价值观 我对流行网络浏览器的限制感兴趣 换句话说 多久可以data image jpg base64 base64 encoded data be in img src data image jpg b
  • 如何使 CSS 样式覆盖 JavaScript 应用的样式

    我动态创建一个 HTML 表 并应用一些样式 var tbl document createElement table tbl id CrewMemberTable document getElementById CrewMemberPan
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • PHP 在数组内循环

    我怎样才能在一个内部循环array在我的代码中 这是我的脚本的静态版本 val array array value gt Male label gt Male array value gt Female label gt Femal my
  • JavaFX:在 WebView img 标签中未加载本地图像

    以下是我的代码 一切安好 我可以加载远程页面 我可以放置 HTML 内容 但我的img标签显示一个X标志表示无法加载图像 Note 我的图像与类位于同一个包中JavaFX在 Smiley 文件夹中 我可以列出所有图像 这意味着路径没有问题
  • 从选择控件 html 复制所选项目的文本

    我有一个带有预定义值的选择控件 我希望我的用户能够使用 CTRL C 复制所选项目的文本 我不希望他们能够更改项目的文本 只需用鼠标 键盘选择它 这是一个显示问题的小提琴 我无法选择所选项目的文本 http jsfiddle net 5C3

随机推荐

  • 如何消除SQL中的NULL字段

    我正在为 SQL Server 2008 R2 开发 TSQL 查询 我正在尝试开发此查询来识别一条记录 客户 由于其中一些值为 NULL 因此我目前正在对大多数表执行 LEFT JOINS 但 LEFT JOIN 的问题是 现在我为某些客
  • Nestjs Apollo graphql上传标量

    我正在使用 Nestjs graphql 框架 我想使用 apollo 标量上传 我已经能够在另一个不包含 Nestjs 的项目中使用标量 schema graphql App module ts注册graphql GraphQLModul
  • 如何查询Firebase Firestore参考数据类型?

    我正在使用 Firestore参考 https firebase google com docs firestore manage data data types用于存储对用户的引用的数据类型 如下面的屏幕截图所示 用户参考 用户收藏 当我
  • Angular 4 + Electron - 如何运行应用程序并观察更改(实时重新加载)

    我正在使用 Angular 4 创建一个 Electron 应用程序 我如何设置它 以便它监视任何更改并实时重新加载它 包 json name angular electron version 0 0 0 license MIT main
  • 如何将网络音频流保存到文件(c++/java)

    是否有任何库或众所周知的方法来保存音频网络流 网络广播 mp3 流 以编程方式归档 您可以使用 libvlcVLC http www videolan org vlc 项目 这wiki http wiki videolan org Libv
  • 策略模式和访客模式有什么区别?

    我很难理解这两种设计模式 您能否给我上下文信息或示例 以便我可以得到清晰的想法并能够映射两者之间的差异 Thanks The 策略模式就像一个1 many关系 当存在一种类型的对象并且我想对其应用多个操作时 我使用策略模式 例如 如果我有一
  • mojoPortal 还是 Umbraco?

    我已经寻找免费 开源 ASP NET CMS 门户系统有一段时间了 并将其分为两个不同的系统 乌姆布拉科 http umbraco org http umbraco org 魔力门户 http www mojoportal com http
  • 如何让 ASP.NET DataPager 控件在 UpdatePanel 中工作?

    我有一个顶部有参数的搜索页面 底部有一个带有结果的搜索按钮 整个内容都包含在母版页内的更新面板中 单击搜索按钮后 它会显示第一页 但是 如果您单击 DataPager 上的下一个按钮 它不会显示第二页 它显示第二页没有结果 任何帮助将不胜感
  • C++ 和 Java 中异常处理的区别?

    在Java中 如果特定的代码行导致程序崩溃 那么异常就会被捕获并且程序会继续执行 但是 在 C 中 如果我有一段代码导致程序崩溃 例如 try int x 6 int p NULL p reinterpret cast
  • 如何测试子组件是否已渲染?

    在酶中 您可以检查子组件是否存在 如下所示 expect wrapper find ChildComponent toHaveLength 1 React 测试库中的这个测试相当于什么 我找到的所有在线示例都只涵盖了寻找 dom 元素的非常
  • REST API 与 Web API

    我是构建 HTTP API 的初学者 我似乎对 REST API 和 Web API 之间的区别感到困惑 我在网上读到更多相关内容 困惑似乎越来越多 我猜菲尔丁有与此链接相同的问题http roy gbiv com untangled 20
  • 如何获取引用 postgresql 中的表的物化视图

    在 postgresql 中 借助 information schema views 表 可以通过简单的 sql 获取引用表的所有视图 但我需要一个等效的 sql 来获取引用该表的物化视图 欲查看以下作品 SELECT FROM infor
  • 为什么这个slideUp功能不流畅?

    我想实现 jQuery 的普通 JS 版本slideUp and slideDown 功能 我的想法是使用 CSStransition为了height属性以及使用增加 减少高度requestAnimationFrame 我用下面的代码尝试过
  • Selenium WebDriverJS,无法为 Chrome 构建 webdriver

    我在设置 Selenium WebDriverJS 时遇到一些问题 我的目标是使用 Javascript 节点 在 Chrome 浏览器上运行 selenium 测试 我正在按照以下说明进行操作https code google com p
  • 我需要关闭“PreparedStatement”吗? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我有一个网
  • 如何从 Azure 云功能引用“可移植”.NET 程序集?

    我已通过 Nuget 和 project json 成功引用了一个 可移植 程序集 我的所有代码都在 Azure 函数中编译 但是当它运行时我得到 无法加载文件或程序集 System Net Version 2 0 5 0 Culture
  • 获取 v2 Google 地图 API 密钥

    看来在我的网站开发和上线 现在 之间 Google 已经逐步淘汰了 Google Maps v2 API 我完全支持进步 但重写我所有的地图代码似乎对我来说有点难以处理 是否仍然可以在网络的某个隐蔽角落获取 Google 地图 v2 API
  • Delphi组件spTbxToolbar换肤

    如何在运行时通过代码 不适用于 groupskintype 更改 sptbxtoolbar 组件的皮肤类型 您只能一次更改所有 SpTBXLib 组件的外观 使用此代码 SkinManager SetSkin Office 2007 Blu
  • 使用drawImage()在画布上输出固定大小的图像?

    我该如何使用drawImage 在a上输出全尺寸图像300px X 380px画布无论源图像大小如何 例子 1 如果有一个图像75px X 95px我希望能够将其绘制以适合300px X 380px帆布 2 如果有一个图像1500px X
  • 使用 CSS 扩展边框

    我一直在测试使用一些嵌套 div 扩展 投影边框的想法 下面有一个工作示例 基本上 我想要实现的是垂直和水平边框延伸到盒子外面 里面有内容 有点像起草的样子 如果可能的话 我希望它能够完全响应 在我的代码中 我设置了带有负边距的高度 以便获