左边竖条的实现方法-8种

最新推荐文章于 2023-07-06 15:48:17 发布
最新推荐文章于 2023-07-06 15:48:17 发布
阅读量2.2k 收藏
点赞数
文章标签： 前端大全-CSS

法一：border

法二：使用伪元素

div::after{
    content:"";
    width:5px;
    height:60px;
    position:absolute;
    top:0;
    left:0;
    background:deeppink;
}


法三：外 box-shadow

法四：内 box-shadow

…………

详情见链接：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651551358&idx=1&sn=a92c4b9591bc7fe321b5f4e809ef82d7&chksm=8025a1bfb75228a9d4ed9f8a9bf530f45f18a0a7a512711f223986289aa332a4d3822b4f45db&scene=21#wechat_redirect

该作者其他关于CSS的文章：

http://www.jobbole.com/members/chokcoco/

吃瓜群众欢乐多
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序 竖线节点 效果
08-11
小程序竖线节点，分割线节点效果，类似时间戳节点效果开发，view ，cover-view 组合开发
vue：如何实现文字竖排
1111111111
12-06 4105
1、如果是在template里面，使用<br>将每个文字换行，即可实现竖排。 2、如果实在script里面，使用\n将每个文字换行，即可实现竖排.
竖向输入文字并展示
王阿星的博客
06-07 1158
竖向输入文字并展示 第一反应就是用 div 模拟 input 吧 本文原需求：1、一个宽两列的输入框，竖向输入文字；2、当文字数量小小于等于 6 时，文字居中一列显示并且字号大,当文字数量大于 6 时，呈两列显示且字号小
vue x轴文字纵向显示 - echart图表
你好！刘斩仙
09-13 518
介绍： 实现 如图所示： 代码如下： <template> <div class="ml20 mr20 mb20 colorFOp"> <div class="head tc mb20 ">测试案例</div> <div ref="test" class="testChart"></div> </div> </template> <script> import * as
VUE3开发,el-table设置圆角后，去掉Safari浏览器上左侧竖线的解决方法
lkawef的专栏
03-15 576
VUE3开发,el-table设置圆角后，去掉Safari浏览器上左侧竖线的解决方法
vue动态在数据之间加“竖杠”
miraclepbs的博客
12-20 4196
<span v-for="(v, i) in list.tab" :key="i">{{v + (i &lt; list.tab.length - 1 ? '|' : '')}}</span>```
如何制作竖线的效果
Charonmomo的博客
07-21 830
描述 在很多网页中, 都会有一个小竖线的效果 (如图) . 实现这个小竖线的效果有很多种方法. 在这里记录一下. 方法 1. 通过::after 在元素后面追加一个宽度为1px的元素 .search-box .search span::after { position: absolute; right: -8px; content: ""; width: 1px; height: 15px; background-color: #ccc; } 2. 设置右
使用css的:before属性在文字前加短竖线
最新发布
锦瑟年华L的博客
07-06 2074
有时候我们需要在文字或者标题前加个短竖线，有的人会使用 border 来模拟一个竖线，其实大可不必，我们可以利用元素的。
vue table表格中只有表头加竖线分割
00年女程序员分享自己的学习笔记
07-20 2826
table表格中只有表头加竖线分割 给加一个属性 ： :header-cell-style="{'border-right':'1px solid #888888'}"
vue-管道符“ | “(竖杠)的作用
慢慢来吧，都会有的。
02-21 3379
vue管道符
[CSS] 用伪元素:after实现分割线和气泡
05-31
用伪元素:after实现分割线和气泡
css魔法之左边竖条的多种实现方法
12-29
问题描述：在只使用一个标签的情况下实现左边竖线 通用标签与样式如下： html: 实现左边竖线 css: .div1 { width: 200px; height: 50px; line-height:50px; text-align: center; background: #ccc; ...
行业分类-设备装置-一种锦涤斜纹竖条面料的制作方法.zip
08-29
行业分类-设备装置-一种锦涤斜纹竖条面料的制作方法.zip
蓝紫竖条背景网页模板
01-22
蓝紫竖条背景网页模板
红黄竖条背景网页模板
01-22
红黄竖条背景网页模板
青色竖条背景BLOG网页模板
01-14
青色竖条背景BLOG网页模板
文字加中间划线
公z号：职场爱学习
06-24 958
text-decoration: line-through;
vue中的页面标题设置
justdoitttt的博客
04-17 132
vue中的页面标题设置 router文件中的index.js： router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title || 'Coinlog'; } next(); }); 在配置路由时添加meta对象，在其中加入title属性 { path: '/a', name: 'a', component: () => import('./a'),
【vue】vue动态展示左侧菜单
热门推荐
小朋友的博客
04-26 1万+
VUE动态展示左侧菜单
Verilog实现竖条黑白格
05-30
实现竖条黑白格的方法有很多种，这里给出一种基本实现思路。 首先，我们可以使用计数器计算出水平和垂直方向的位置。在计算水平方向的位置时，可以根据计数器的计数值来判断当前是否需要切换黑白格的颜色；在计算垂直方向的位置时，可以根据水平方向的位置和计数器的计数值来计算出垂直方向的位置。 以下是一种基本的实现方式： ```verilog module vertical_bar ( input wire clk, input wire rst_n, input wire FsyncI_dly8, input wire LsyncI_dly8, output reg [7:0] R, output reg [7:0] G, output reg [7:0] B ); parameter DETE_WIDTH = 640; // 水平方向像素数 parameter DETE_HEIGHT = 480; // 垂直方向像素数 parameter DATA_WIDTH = 24; // 数据位宽 reg [2:0] cnt_h = 0; // 水平方向计数器 reg [2:0] cnt_v = 0; // 垂直方向计数器 reg color = 0; // 当前颜色，0 表示黑色，1 表示白色 always @(posedge clk or negedge rst_n) begin if (!rst_n) begin cnt_h <= 0; cnt_v <= 0; color <= 0; end else begin if (FsyncI_dly8 == 0) begin cnt_h <= 0; cnt_v <= 0; color <= 0; end else if (LsyncI_dly8 == 1) begin cnt_h <= (cnt_h == 3'b111) ? 0 : (cnt_h + 1); if (cnt_h == 3'b111) begin color <= ~color; // 切换颜色 end cnt_v <= (cnt_h == 3'b111) ? ((cnt_v == DETE_HEIGHT-1) ? 0 : (cnt_v + 1)) : cnt_v; end end end always @(cnt_h or cnt_v) begin if (color == 0) begin // 黑色 R <= 8'h00; G <= 8'h00; B <= 8'h00; end else begin // 白色 R <= 8'hFF; G <= 8'hFF; B <= 8'hFF; end end endmodule ``` 这个模块会根据输入的 FsyncI_dly8 和 LsyncI_dly8 信号来计算出水平和垂直方向的位置，并根据当前位置和颜色来输出 RGB 值。在计算水平方向的位置时，每 8 个像素会切换一次颜色；在计算垂直方向的位置时，每 8 个像素会换行。注意，这个模块只是一种基本实现方式，具体实现还需要根据你的需求进行相应的调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值