Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan sudut bulat sempadan dalam css

Bagaimana untuk menetapkan sudut bulat sempadan dalam css

青灯夜游asal: 2021-10-11 17:49:5625921semak imbas

Dalam CSS, anda boleh menggunakan atribut jejari sempadan untuk menetapkan sudut bulat sempadan Fungsi atribut ini adalah untuk menambah kesan sudut bulat pada sempadan Anda hanya perlu menambah "jejari sempadan. nilai jejari sudut bulat;" kepada elemen. Gaya, anda boleh menetapkan sudut bulat empat sempadan pada masa yang sama.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara paling biasa dan paling mudah untuk menetapkan sudut bulat sempadan dalam css ialah menggunakan atribut jejari sempadan.

Sifat jejari sempadan CSS mentakrifkan jejari sudut elemen Melalui sifat jejari sempadan CSS, gaya "sudut bulat" mana-mana elemen boleh dicapai.

Sintaks:

border-radius: none　｜　length{1,4} [/ length{1,4}

Setiap nilai boleh dalam bentuk nilai berangka atau peratusan.

panjang/panjang Panjang pertama mewakili jejari dalam arah mendatar, dan yang kedua mewakili jejari dalam arah menegak.

Jika ia adalah nilai, maka empat nilai di kiri atas, kanan atas, kanan bawah dan kiri bawah adalah sama.

Jika terdapat dua nilai, maka kiri atas dan kanan bawah adalah sama dan merupakan nilai pertama, dan kanan atas dan kiri bawah adalah sama dan merupakan nilai kedua.
Bagaimana untuk menetapkan sudut bulat sempadan dalam css
Jika terdapat tiga nilai, maka nilai pertama adalah untuk menetapkan atas-kiri, dan nilai kedua adalah atas-kanan dan bawah-kiri dan mereka akan sama, dan nilai ketiga adalah untuk tetapkan bahagian bawah-kanan.

Jika terdapat empat nilai, maka nilai pertama adalah untuk menetapkan atas-kiri, dan nilai kedua untuk menetapkan atas-kanan, nilai ketiga untuk menetapkan bawah-kanan, dan yang keempat nilai adalah untuk menetapkan bawah- kiri
Bagaimana untuk menetapkan sudut bulat sempadan dalam css

Sebagai tambahan kepada singkatan di atas, anda juga boleh menulis empat penjuru secara berasingan seperti sempadan, seperti berikut:

border-top-left-radius: //左上角 
border-top-right-radius: //右上角 
border-bottom-right-radius: //右下角 
border-bottom-left-radius: //左下角

masing-masing Jejari mendatar dan menegak Apabila nilai kedua diabaikan, jejari mendatar dan menegak adalah sama.
jejari sempadan hanya menyokong format sintaks standard jejari sempadan dalam versi penyemak imbas berikut: Firefox4.0, Safari5.0, Google Chrome 10.0, Opera 10.5 dan IE9 Untuk penyemak imbas yang lebih lama, jejari sempadan perlu berdasarkan Kernel penyemak imbas yang berbeza menambah awalan yang berbeza Sebagai contoh, kernel Mozilla perlu menambah "-moz", manakala kernel Webkit perlu menambah "-webkit", dll. Walau bagaimanapun, IE dan Opera tidak mempunyai format peribadi, jadi dalam untuk memaksimumkan keserasian penyemak imbas , kami perlu menetapkannya seperti berikut:

-webkit-border-radius: 10px 20px 30px; 
-moz-border-radius: 10px 20px 30px; 
border-radius: 10px 20px 30px;

Sila tulis borang standard selepas borang peribadi penyemak imbas.

Beberapa contoh untuk melihat kesannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img  src="../images/photo.jpg"    style="max-width:90%" alt="Bagaimana untuk menetapkan sudut bulat sempadan dalam css" >
</body>
</html>

Kesan:

Bagaimana untuk menetapkan sudut bulat sempadan dalam css
Jejari empat penjuru ialah 30px;

Lihat bulatan standard dan elips sekali lagi:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
p {
display: inline-block;
border: 10px solid red;
}

.circle {
width: 50px;
height: 50px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}

.elipse {
width: 50px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
</style>
</head>
<body>
<p></p>
<p></p>
</body>
</html>

Kesan:
Bagaimana untuk menetapkan sudut bulat sempadan dalam css
Perbezaan antara p pertama dan kedua terutamanya terletak pada sama ada ia segi empat sama atau segi empat sama Segi empat tepat dan bulatan boleh digunakan sebagai ganti imej bulatan semasa karusel.

Di atas adalah contoh jejari yang sama dalam arah mendatar dan menegak Berikut adalah dua contoh jejari berbeza dalam arah mendatar dan menegak:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
p {
display: inline-block;
border: 10px solid red;
margin: 100px;
}

.p1 {
width: 200px;
height: 100px;
border-radius: 0px 50px 32px/28px 50px 70px;
}

.p2 {
width: 100px;
height: 200px;
border-radius: 26px 106px 162px 32px/28px 80px 178px 26px;
}

.p3 {
width: 100px;
height: 200px;
border-radius: 20px 50px/ 20px 50px;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
</body>
</html>

Kesannya adalah seperti berikut: <.>

Bagaimana untuk menetapkan sudut bulat sempadan dalam css

(Belajar perkongsian video:

tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sudut bulat sempadan dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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 sebelumnya：Bagaimana untuk melaksanakan segi tiga dalam cssArtikel seterusnya：Bagaimana untuk melaksanakan segi tiga dalam css

Artikel berkaitan

Lihat lagi