我有一段这样的html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1"> <h1>Hello</h1> </div> </body> </html> 这是我希望呈现的效果标题样式无所谓, 关键是下面的线条关键是 div border-bottom 怎么设置长度? 我希望让他长度占据 50% 的比例, 并且水平居中

div下边框如何设置长度以及居中?

1 个回答

发布于
2022-01-05

✓ 已被采纳

h1{
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, #000 0%, #f00 100%);
    background-size: 50% 3px;
    background-position: 50% 100%;
    display: inline-block;
}

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

css布局怎么保证右边一直在可视范围内？
如下：灰色和红色的高度都不确定，怎么保证左边高度太高需要滚动时右边一直能在可视范围内？ {代码...}
5 回答2.2k 阅读
H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？
H5页面点击按钮使用window.open 打开并展示一个pdf，安卓手机变成下载了？需要在移动端也是预览怎么实现呢？ {代码...}
3 回答1.7k 阅读✓ 已解决
想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？
想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？或者那种插件兼容性会比较好呢？
5 回答798 阅读
css3如何实现这样的圆环效果?
8个扇形组成一个中间镂空的圆环，每个扇形之间有几个角度的空白间隙。如何实现这样的效果
4 回答1.9k 阅读✓ 已解决
CSS如何巧妙实现标题居中、关闭按钮居右效果？
比方说这个，父盒子有左右 padding，中间是标题，右边是关闭按钮。有不通过定位的方式，巧妙实现么？
3 回答2.6k 阅读
H5 页面在IOS safari 中点击可以放大的问题？想禁用这个放大的功能？
html 中已经加入这个，但是现在还是可以点击放大？ {代码...}
2 回答1.4k 阅读✓ 已解决
如何用 CSS 实现卡片顶部内凹效果？
问题描述用 HTML、CSS 实现一个宽度为 300px, 高度为 auto 的长方形卡片，要求：卡片圆角 20px背景使用渐变色进行填充边框 2px，边框颜色是与背景色不同的另一种渐变色卡片顶部有小幅度的内凹效果，也就是说长方形顶部那条边为弧线，其他三边为直线。目标效果截图为卡片顶部部分。
5 回答2k 阅读

div下边框如何设置长度以及居中?

你尚未登录，登录后可以

css布局怎么保证右边一直在可视范围内？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

css3如何实现这样的圆环效果?

CSS如何巧妙实现标题居中、关闭按钮居右效果？

H5 页面在IOS safari 中点击可以放大的问题？想禁用这个放大的功能？

如何用 CSS 实现卡片顶部内凹效果？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？