Rumah hujung hadapan web tutorial css 分享div加一个边框样式的示例代码

分享div加一个边框样式的示例代码

Jul 19, 2017 am 11:18 AM
gaya Contoh bingkai

如何给div加一个边框样式?

对div盒子加一个边框样式很简单只需要使用border板块样式即可。

一、虚线与实线边框   -   TOP

边框虚线样式:dashed
边框实现样式:solid

border:1px dashed #000
Salin selepas log masuk

代表设置对象边框宽度为1px黑色虚线边框

border:1px solid #000
Salin selepas log masuk


代表设置对象边框宽度为1px黑色实现边框

二、对div上边加边框 - TOP

我们给div上边加1px黑色边框

div{border-top:1px solid #000}
Salin selepas log masuk

三、给div底部加边框 - TOP

给div盒子底部加2px虚线红色边框

div{border-bottom:2px dashed #F00}
Salin selepas log masuk

四、在div盒子左侧加边框 - TOP

给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框

.divcss5{ border-left:1px solid #00F}
Salin selepas log masuk

DIV代码:

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>
Salin selepas log masuk

五、在盒子div右侧加边框 - TOP

div对象右侧加1px红色实线边框

div{ border-right:1px solid #F00}
Salin selepas log masuk

六、在盒子上下加边框 - TOP

给盒子上下加1px实现黑色边框

div{border-top:1px solid #000;border-bottom:1px solid #000}
Salin selepas log masuk

七、给div盒子左右加边框 - TOP

给盒子左右加2px虚线绿色边框

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
Salin selepas log masuk

八、给div四边加上一个边框 - TOP

给一个DIV四边加上3px实现黑色边框

div{ border:3px solid #000}
Salin selepas log masuk

Atas ialah kandungan terperinci 分享div加一个边框样式的示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara melaraskan tetapan sempadan tetingkap pada Windows 11: Tukar warna dan saiz Cara melaraskan tetapan sempadan tetingkap pada Windows 11: Tukar warna dan saiz Sep 22, 2023 am 11:37 AM

Windows 11 membawa reka bentuk yang segar dan elegan ke hadapan antara muka moden membolehkan anda memperibadikan dan menukar butiran terbaik, seperti sempadan tingkap. Dalam panduan ini, kami akan membincangkan arahan langkah demi langkah untuk membantu anda mencipta persekitaran yang mencerminkan gaya anda dalam sistem pengendalian Windows. Bagaimana untuk menukar tetapan sempadan tetingkap? Tekan + untuk membuka apl Tetapan. WindowsSaya pergi ke Pemperibadian dan klik Tetapan Warna. Perubahan Warna Tetingkap Sempadan Tetapan Tetingkap 11" Lebar="643" Tinggi="500" > Cari pilihan Tunjukkan warna aksen pada bar tajuk dan sempadan tetingkap, dan togol suis di sebelahnya. Untuk memaparkan warna aksen pada menu Mula dan bar tugas Untuk memaparkan warna tema pada menu Mula dan bar tugas, hidupkan Tunjukkan tema pada menu Mula dan bar tugas

macOS: Cara menukar warna widget desktop macOS: Cara menukar warna widget desktop Oct 07, 2023 am 08:17 AM

Dalam macOS Sonoma, widget tidak perlu disembunyikan di luar skrin atau dilupakan dalam panel Pusat Pemberitahuan seperti yang dilakukan dalam versi sebelumnya macOS Apple. Sebaliknya, ia boleh diletakkan terus pada desktop Mac anda - ia juga interaktif. Apabila tidak digunakan, widget desktop macOS memudar ke latar belakang dalam gaya monokrom, mengurangkan gangguan dan membolehkan anda menumpukan pada tugas yang sedang dijalankan dalam aplikasi atau tetingkap aktif. Walau bagaimanapun, apabila anda mengklik pada desktop, ia kembali kepada warna penuh. Jika anda lebih suka rupa yang menjemukan dan ingin mengekalkan aspek keseragaman itu pada desktop anda, ada cara untuk menjadikannya kekal. Langkah-langkah berikut menunjukkan cara ia dilakukan. Buka apl Tetapan Sistem

Pengenalan kepada fungsi Python: Pengenalan dan contoh fungsi exec Pengenalan kepada fungsi Python: Pengenalan dan contoh fungsi exec Nov 03, 2023 pm 02:09 PM

Pengenalan kepada fungsi Python: Pengenalan dan contoh fungsi exec Pengenalan: Dalam Python, exec ialah fungsi terbina dalam yang digunakan untuk melaksanakan kod Python yang disimpan dalam rentetan atau fail. Fungsi exec menyediakan cara untuk melaksanakan kod secara dinamik, membolehkan program menjana, mengubah suai dan melaksanakan kod seperti yang diperlukan semasa masa jalan. Artikel ini akan memperkenalkan cara menggunakan fungsi exec dan memberikan beberapa contoh kod praktikal. Cara menggunakan fungsi exec: Sintaks asas fungsi exec adalah seperti berikut: exec

Spesifikasi dan contoh lekukan bahasa Go Spesifikasi dan contoh lekukan bahasa Go Mar 22, 2024 pm 09:33 PM

Spesifikasi lekukan dan contoh bahasa Go adalah bahasa pengaturcaraan yang dibangunkan oleh Google Ia terkenal dengan sintaksnya yang ringkas dan jelas, yang mana spesifikasi lekukan memainkan peranan penting dalam kebolehbacaan dan keindahan kod. Artikel ini akan memperkenalkan spesifikasi lekukan bahasa Go dan menerangkan secara terperinci melalui contoh kod tertentu. Spesifikasi lekukan Dalam bahasa Go, tab digunakan untuk lekukan dan bukannya ruang. Setiap tahap lekukan ialah satu tab, biasanya ditetapkan kepada lebar 4 ruang. Spesifikasi sedemikian menyatukan gaya pengekodan dan membolehkan pasukan bekerjasama untuk menyusun

Fungsi Oracle DECODE penjelasan terperinci dan contoh penggunaan Fungsi Oracle DECODE penjelasan terperinci dan contoh penggunaan Mar 08, 2024 pm 03:51 PM

Fungsi DECODE dalam Oracle ialah ungkapan bersyarat yang sering digunakan untuk mengembalikan hasil yang berbeza berdasarkan keadaan yang berbeza dalam pernyataan pertanyaan. Artikel ini akan memperkenalkan sintaks, penggunaan dan kod sampel bagi fungsi DECODE secara terperinci. 1. sintaks fungsi DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr: ungkapan atau medan yang hendak dibandingkan. carian1,

Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi abs Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi abs Nov 03, 2023 pm 12:05 PM

Pengenalan kepada fungsi Python: penggunaan dan contoh fungsi abs 1. Pengenalan kepada penggunaan fungsi abs Dalam Python, fungsi abs ialah fungsi terbina dalam yang digunakan untuk mengira nilai mutlak nilai tertentu. Ia boleh menerima hujah berangka dan mengembalikan nilai mutlak nombor itu. Sintaks asas fungsi abs adalah seperti berikut: abs(x) dengan x ialah parameter berangka untuk mengira nilai mutlak, yang boleh menjadi integer atau nombor titik terapung. 2. Contoh fungsi abs Di bawah kami akan menunjukkan penggunaan fungsi abs melalui beberapa contoh khusus: Contoh 1: Pengiraan

Cara membuat sempadan tersuai dalam Microsoft Word Cara membuat sempadan tersuai dalam Microsoft Word Nov 18, 2023 pm 11:17 PM

Ingin menjadikan muka depan projek sekolah anda kelihatan menarik? Tiada apa-apa yang menonjolkannya daripada penyerahan lain seperti sempadan yang cantik dan elegan pada halaman utama buku kerja anda. Walau bagaimanapun, sempadan satu baris standard dalam Microsoft Word telah menjadi sangat jelas dan membosankan. Oleh itu, kami menunjukkan kepada anda langkah-langkah untuk mencipta dan menggunakan sempadan tersuai dalam dokumen Microsoft Word. Cara Membuat Sempadan Tersuai dalam Microsoft Word Mencipta sempadan tersuai adalah sangat mudah. Walau bagaimanapun, anda memerlukan sempadan. Langkah 1 – Muat Turun Sempadan Tersuai Terdapat banyak sempadan percuma di internet. Kami telah memuat turun sempadan seperti ini. Langkah 1 – Cari di Internet untuk sempadan tersuai. Sebagai alternatif, anda boleh pergi ke keratan

Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance Nov 04, 2023 pm 03:15 PM

Pengenalan kepada fungsi Python: Penggunaan dan contoh fungsi isinstance Python ialah bahasa pengaturcaraan berkuasa yang menyediakan banyak fungsi terbina dalam untuk menjadikan pengaturcaraan lebih mudah dan cekap. Salah satu fungsi terbina dalam yang sangat berguna ialah fungsi isinstance(). Artikel ini akan memperkenalkan penggunaan dan contoh fungsi isinstance dan memberikan contoh kod khusus. Fungsi isinstance() digunakan untuk menentukan sama ada objek ialah contoh kelas atau jenis tertentu. Sintaks fungsi ini adalah seperti berikut

See all articles