css中怎么制作四分之一圆

青灯夜游
Freigeben: 2021-11-09 14:01:20
Original
7870 Leute haben es durchsucht

css中制作四分之一圆的方法:1、使用width和height属性设置元素的宽高相等;2、使用border-radius属性设置元素一个圆角的值为宽高值,其他3个圆角的值为0,语法“border-radius:宽或高值 0 0 0;”。

css中怎么制作四分之一圆

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中,提到制作圆,就会想到border-radius属性。

该属性可以将一个宽高相等的正方形元素,变成一个圆

p { width: 50px; height: 50px; background-color: #0000FF; border-radius: 50px; } 

Nach dem Login kopieren

1.png

但有时我们不需要一个整圆,只需要一部分,利用四分之一圆,这要怎么做?

还是利用border-radius属性,设置元素一个圆角的值为宽或高值,其他3个圆角的值为0即可:

border-radius: 50px 0 0 0;
Nach dem Login kopieren

2.png

border-radius: 0 50px 0 0;
Nach dem Login kopieren

3.png

border-radius: 0 0 50px 0;
Nach dem Login kopieren

4.png

border-radius: 0 0 0 50px;
Nach dem Login kopieren

5.png

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt voncss中怎么制作四分之一圆. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!