masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > css怎么设置虚线

css怎么设置虚线

藏色散人
Lepaskan： 2022-12-30 11:13:04
asal
30171 orang telah melayarinya

css设置虚线的方法：1、创建一个

标签，然后给div添加css样式为“border-bottom:red 1px dashed;”；2、通过hr标签设置水平线，然后给hr标签添加border属性即可实现虚线效果。

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

推荐：《css视频教程》

css设置虚线的方法

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

  • 我们知道在html中

    标签的边框可以设置为虚线。

所以可以先创建一个

标签：

<div class="xuxian"></div>
Salin selepas log masuk

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

具体如下：

.xuxian{
width:100%;
height:0;
border-bottom:red 1px dashed;}
/*red表示虚线的颜色为红色，1px表示边框宽度为一个像素，dashed表示边框线型为虚线*/
Salin selepas log masuk

效果图：

0f357f6ebdaab065bae118cbf079df7.png

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

css代码：

hr{border:blue 1px dashed}
Salin selepas log masuk

效果图：

34681d98d5682dd7b26a7ef85ce88db.png

完整代码如：




    
    css设置虚线





<div class="xuxian"></div>
Salin selepas log masuk

更多计算机编程相关知识，请访问：编程教学！！

Atas ialah kandungan terperinci css怎么设置虚线. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：利用css伪类实现鼠标滑过按钮动画效果 Artikel seterusnya：css鼠标样式
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1335
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Ubah suai gaya CSS sebaris secara dinamik dalam Javafx Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
daripada 2024-04-06 20:57:16
0
1
487
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada? Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
daripada 2024-04-06 20:41:51
0
1
518
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan