[CSS3] 几种分割线实现方法

最新推荐文章于 2022-07-08 18:11:07 发布
最新推荐文章于 2022-07-08 18:11:07 发布
阅读量1.4k 收藏
点赞数
原文链接：http://www.cnblogs.com/frost-yen/p/7351246.html
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .demo {
                width: 600px;
            }
            .demo-container {
                clear: both;
                padding: 30px 20px;
                text-align: left;
                margin: 0 auto;
                line-height: 18px;
            }


            .line-01 {
                margin: 20px 0;
                line-height: 1px;
                border-left: 200px solid #ddd;
                border-right: 200px solid #ddd;
                text-align: center;
            }

            .line-02 {
                height: 1px;
                border-top: 1px solid #ddd;
                text-align: center;
            }
            .line-02 span {
                position: relative;
                top: -12px;
                background: #fff;
                padding: 0 20px;
            }
            .line-03 {
                width: 600px;
            }
            .line-03 b {
                background: #ddd;
                margin-top: 4px;
                display: inline-block;
                width: 180px;
                height: 1px;
                overflow: hidden;
                vertical-align: middle;
            }
            .line-03 span {
                display: inline-block;
                width: 220px;
                vertical-align: middle;
                text-align: center;
            }
            .line-04 {
                overflow: hidden;
                zoom: 1;
            }
            .line-04 b {
                background: #ddd;
                margin-top: 12px;
                float: left;
                width: 26%;
                height: 1px;
                overflow: hidden;
            }
            .line-04 span {
                padding: 0 10px;
                width: 32%;
                float: left;
                text-align: center;
            }
            .line-05 {
                letter-spacing: -1px;
                color: #ddd;
            }
            .line-05 span {
                letter-spacing: 0;
                color: #222;
                margin: 0 20px;
            }

        </style>
    </head>
    <body>
        <div class="demo-container demo">
            <div class="line-01">小小分隔线 单标签实现</div><br/>
            <div class="line-02">
                <span>小小分隔线 巧用色实现</span>
            </div><br/>
            <div class="line-03">
                <b></b>
                <span>小小分隔线 inline-block实现</span>
                <b></b>
            </div><br/>
            <div class="line-04">
                <b></b>
                <span>小小分隔线 浮动来实现</span>
                <b></b>
            </div><br/>
            <div class="line-05">———————————<span>小小分隔线 字符来实现</span>————————————</div>
        </div>
    </body>
</html>

 

转载于:https://www.cnblogs.com/frost-yen/p/7351246.html

weixin_30332705
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5 纵向分割线,html5和css3制作不规则的网页背景分割线
weixin_42641998的博客
05-30 861
这是一款实用的、效果炫酷的html5和css3制作不规则的网页背景分割线网页模板。EXAMPLE 1下面来看一下第一个demo的制作流程。html结构：实用一个section来包裹所有的内容，其中放置一个class为se-slope的div，div中放置的是文章article。Some headlineSome textCSS背景的颜色和偶数se-slope单元的背景色一致。body{backgr...
【Uniapp微信小程序】图片左右分割/分割线切割图片/图片批量分割线切割
最新发布
cnsv的博客
06-26 516
uniapp微信小程序图片左右分割切割方法组件，使用分割线分割，默认分割线中间
css分割线
UserGuan的博客
05-01 1494
方式一：使用after与before设置 .box_area { position: relative; color: #000; font-size: 24px; text-align: center; overflow: hidden; } .box_area::after, .box_area::before { position: absolute; top: 50%; content: ''; width: 100%;
css3 做一个漂亮的分割线
chelen_jak的专栏
07-30 1万+
原文出处：http://blog.csdn.net/majormayer/article/details/50996444 在网页中我们经常会用到分割线，但是原始的分割线并不太美观，我们可以用css3的skew属性做一个美观一点的分割线：  效果：    分辨率改变：  html> head lang="en"> meta charset="UTF-8"> ti
使用css3制作渐变分割线
weixin_33851429的博客
02-15 177
为什么80%的码农都做不了架构师？>>> ...
css实现分割线或者小竖线
qq_26889291的博客
11-16 4181
css实现分割线或者小竖线
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
HTML 几种特别分割线特效
09-28
下面我们将详细探讨如何利用CSS实现文中提到的几种特别的HTML分割线特效。 1. **基本线条** 这是最基础的水平线，通常用`<hr>`标签生成。默认情况下，它是一条单色的水平线，可以通过`width`、`color`和`size`属性...
CSS巧妙实现自适应分隔线的N种方法
01-21
下面列举几种更好的实现方式，不会露馅的那种 1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;，然后给定两个伪元素，分别绝对定位，那么此时伪元素也是跟随着水平居中的，设置...
半圆加虚线分割线效果
11-12
标题“半圆加虚线分割线效果”描述了一种特定的界面设计，它结合了半圆形的图形与虚线分割线，以美观且功能性的样式分隔不同的内容区域。这种效果可以用于列表项之间的分隔，或者在布局中创造视觉上的区分。 实现...
css实现分割线功能,各种各样的分割线(附效果图)
xvzhengyang的博客
07-08 1万+
css hr 分割线
CSS巧妙实现分隔线的几种方法
Wancc123的博客
08-02 4739
实际效果 1.单个标签实现分隔线 HTML部分代码如下所示 <div class="line_01">小小分隔线 单标签实现</div> CSS部分代码如下 .line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #ddd; text-alig
css3 border边框斜线,CSS3 斜线分割布局
weixin_32319177的博客
08-03 1291
CSS语言：CSSSCSS确定@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);body {overflow: hidden;}.pyramid {position: absolute;width: 0;height: 0;bottom: 0;transform: translate(-40%);bord...
css之分割线特效
weixin_41277748的博客
05-15 3834
温馨小提示，下面的盒子用的都是Grid布局，如果想要其他布局可以点击这里CSS Grid Generator 盒子html <div class="parent1"> <div class="div1">斜分割线</div> <div class="div2">SETTINGS</div> <div class="div3">HTML</div> &lt.
一个渐变的优雅的分割线条（使用css定义）
十二哥的专栏
11-23 1万+
轻松实现一个华丽优雅的分割线条（使用css定义）
CSS3 文字边框 -webkit-text-stroke 镂空的字体制作
哈哈hyc的博客
01-14 1万+
CSS边框的一个不足就是只有矩形的元素才能使用。 -webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。 而且，配合使用color: transparent属性，还可以创建镂空的字体！ -webkit-text-fill-color可以填充中间的颜色部分，可以自己尝试一下！ h2{ font-size: 36px; col...
css等比例分割父级容器（完美三等分）
热门推荐
xiaobing_hope的专栏
04-30 7万+
css等比例分割父级容器（完美三等分）          父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ html部分代码： 方法一： 浮动布局+百分比  （将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比） 方法二：行内元素（inline-block）+百分比 方法三： 父元素  display:t
由中间向两边渐变的分割线
To be a better man！
05-19 3221
原理是使用css3的渐变背景，再将高设为分割线的高度 .title{ position:relative; text-align:center; } .title:before, .title:after { content: ""; width: 40%; height: 1px; position: absolute; top: 50%; }
横、竖分割线
DouDouLee_blog的博客
05-31 1189
竖分割线： <View android:layout_width="0.5px" android:layout_height="120dp" android:background="#B8B8B8" android:visibility="visible" /> 横分割线： <View android:layout_width
css九宫格分割线怎么实现
02-06
CSS 九宫格分割线的实现方式有很多种，这里介绍几种常用的方法。 1. 使用 `border` 属性 可以在容器元素上设置 `border` 属性，将容器分成九个小格。 例如： ```css .container { border: 5px solid #000; border-top: none; border-left: none; width: 200px; height: 200px; } ``` 2. 使用 `box-shadow` 属性 也可以使用 `box-shadow` 属性在容器元素上绘制九宫格分割线。 例如： ```css .container { box-shadow: 5px 0 0 0 #000, 10px 0 0 0 #000, 15px 0 0 0 #000, 0 5px 0 0 #000, 0 10px 0 0 #000, 0 15px 0 0 #000; width: 200px; height: 200px; } ``` 3. 使用 `::before` 和 `::after` 伪元素 可以在容器元素的伪元素上使用 `::before` 和 `::after` 分别绘制九宫格的四条边。 例如： ```css .container { position: relative; width: 200px; height: 200px; } .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 5px solid #000; border-top: none; border-left: none; } .container::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 5px solid #000; border-bottom: none; border-right: none; } ``` 4. 使用 `background` 属性 还可以使用背景图片的方式来绘制九宫格分割线。 例如： ```css .container { background: url(grid.png) top left repeat; width: 200px; height: 200px; } ``
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值