如何利用CSS3的线性渐变linear-gradient制作边框
这篇文章主要介绍了关于如何利用CSS3的线性渐变linear-gradient制作边框，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
linear-gradient线条用来制作边框还是比较给力的,尤其是利用其描边可以制作一些复制的边框效果,这里我们就来看一下利用CSS3的线性渐变linear-gradient制作边框的示例
一般的app边框描边的线都小于一像素，那么我就像往常一样直接描了1px的边框，虽然是1px可是结果和app里的描边完全不一样“粗了”，所以就在网找了一下看看有没有解决方法，可是找了一会没找到，那咋办，需求方不愿意不要这么粗，那就只能自己解决了。
所以用上个方法联想到了线性渐变（linear-gradient）
CSS
.line li{ border: none;
background-image: -webkit-linear-gradient(#222 50%,transparent 50%);
background-image: -moz-linear-gradient(#222 50%,transparent 50%);
background-image: -o-linear-gradient(#222 50%,transparent 50%);
background-image: linear-gradient(#222 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottombottom;}XML/HTML
<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数如 left描边需要改变：
CSS
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;
具体的都不一一列出了。
利用linear制作复杂的边框效果
另外，在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码，大家可以在自己的电脑中查看效果：
CSS
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
}
.first:before {
background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
background-image: linear-gradient(0deg, orange, red);
}
.third:before {
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
</style>
</head>
<body>
<p class="box first"></p>
<p class="box second"></p>
<p class="box third"></p>
</body>
</html> 有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？总体思路是，我们先定义一个白色的p，在定义一个白色方块大一圈的带颜色的p。两个重叠一下，并且让白色的p覆盖彩色p，就实现了边框的效果。
这里面用到的css知识点很多。
1、:before伪类
通过上面的代码我们看出，其实我们在定义的白色p中定义了一个:before伪类，把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便，只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。
2、linear-gradient
现在很多浏览器都支持这个css方法。该方法有以下三种使用模式：
①background:linear-gradient(top,#fff,#000)
这段代码的意思是，从上部开始为白色，到底部为黑色进行过度。
②background:linear-gradient(top,right,#fff,#000)
这段代码关于位置传递了两个参数，top和right，表示从右上放开始，到左下方变化，其他道理与第一个相同。
③background:linear-gradient(30deg,#fff,#000)
这段代码的第一个参数传递的是角度，其实道理和位置是一样的，只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢？根据实验，0度对应bottom，90度对应left，180度对应top，360度对应right。
以上就是利用linear方法实现绚丽边框的代码和解释，大家可以在本地进行实现，以此发现更多新奇的组合实现方法。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci 如何利用CSS3的线性渐变linear-gradient制作边框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
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
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
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
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Sains popular tentang cara menetapkan sempadan cemerlang
Mar 20, 2024 am 10:30 AM
Tidak jarang Excel muncul dalam kerja dan kehidupan harian kita, sama ada pengeluaran maklumat pekerja, jadual gaji atau maklumat dan transkrip pendaftaran pelajar, Excel ialah alat yang agak mudah digunakan. Apabila mencetak Excel, anda perlu menetapkan sempadan untuk memenuhi keperluan percetakan. Dalam artikel ini, editor akan memperkenalkan anda kepada beberapa cara untuk menetapkan sempadan Excel. Kaedah 1. Gunakan butang tab fungsi Ini harus menjadi kaedah yang sering digunakan oleh semua orang. Ia adalah mudah dan cepat Operasi khusus: pilih kawasan sel B2:H10 di mana anda perlu menambah sempadan, klik tab [Mula]. - lungsur turun [Sempadan] di Butang kanan-[Semua Bingkai] untuk melengkapkan penambahan bingkai. Kaedah 2. Pilih kawasan sel B2:H10 di mana anda ingin menambah sempadan.
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
