简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

css如何设置圆角边框？css设置圆角边框的方法(图文)

不言
Lepaskan： 2018-09-08 14:00:36
asal
31197 orang telah melayarinya

css如何设置边框？很多时候在开发网页前端的时候，为了让网页上面的东西看起来更加的舒服，我们可能需要设置一些圆角边框比如按钮之类的，那么，我们该怎么来设置圆角边框呢？本篇文章将给大家来介绍一下css设置圆角边框的方法。

css设置圆角边框最常用也是最简单的方法就是利用border-radius属性。

CSS圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。

我们来看一个css设置圆角边框代码例子：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:80px 40px; 
background:pink;
width:150px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>圆角边框</div>
</body>
</html>
Salin selepas log masuk

效果如下：

2345截图20180908134641.png

border-radius可以同时设置1到4个值。

如果设置1个值，表示4个圆角都使用这个值。

css圆角边框代码：border-radius: 15px;

2010121212022843.png

如果设置两个值，表示左上角和右下角使用第一 个值，右上角和左下角使用第二个值。

css圆角边框代码：border-radius: 15px 5px;

2010121212024574.png

如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。

css圆角边框代码：border-radius: 15px 5px 25px;

2010121212025435.png

如果设置四个值，则依次 对应左上角、右上角、右下角、左下角（顺时针顺序）。

css圆角边框代码：border-radius: 15px 5px 25px 0px;

2010121212030934.png

border-radius还可以用斜杠设置第二组值。第一组值表示水平半径，第二组值表示垂直半径。第二组值也可以同时设置1到4个值，应用规则与第一组值相同。

除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。

以上就是css设置圆角边框的方法，想要了解更多css边框属性可以参考css手册。

Atas ialah kandungan terperinci css如何设置圆角边框？css设置圆角边框的方法(图文). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
css
sumber：php.cn
Artikel sebelumnya：css中的padding属性可以为负值吗？css中padding属性的详解 Artikel seterusnya：css颜色渐变实例：css3文字颜色渐变的实现方法
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
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！