css怎么设置虚线


本文摘自PHP中文网,作者藏色散人,侵删。

css设置虚线的方法:1、创建一个<div>标签,然后给div添加css样式为“border-bottom:red 1px dashed;”;2、通过hr标签设置水平线,然后给hr标签添加border属性即可实现虚线效果。

文中演示环境:宏基S40-51、Windows10 家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5。

推荐:《css视频教程》

css设置虚线的方法

通过设置虚线边框来设置虚线:

  • 我们知道在html中<div>标签的边框可以设置为虚线。

所以可以先创建一个<div>标签:

1

<div class="xuxian"></div>

然后将该边框的高度设置为0,将上边框或者下边框其中一个设置为一个像素的虚线。

具体如下:

1

2

3

4

5

.xuxian{

width:100%;

height:0;

border-bottom:red 1px dashed;}

/*red表示虚线的颜色为红色,1px表示边框宽度为一个像素,dashed表示边框线型为虚线*/

效果图:

0f357f6ebdaab065bae118cbf079df7.png

  • 在HTML中hr标签同样可以设置水平线,我们可以通过给hr标签设置css样式实现虚线效果。

css代码:

1

hr{border:blue 1px dashed}

效果图:

34681d98d5682dd7b26a7ef85ce88db.png

阅读剩余部分

相关阅读 >>

学html css看什么书?

css计数器如何实现自动嵌套编号

css文字颜色渐变的三种实现方式(附代码)

css可以用什么软件

css边框阴影怎么设置

css中width什么意思

css如何实现文字不能选中

浏览器内核以及浏览器兼容的问题分析

css div不随滚动条移动的实现方法

css怎么设置文件编码

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...