Heim > Artikel > Web-Frontend > So verwenden Sie den Randradius in CSS

So verwenden Sie den Randradius in CSS

php中世界最好的语言Original: 2017-11-23 11:30:592237Durchsuche

Heute werde ich Ihnen den Randradius, die Verwendung des Randradius und die Attribute des Randradius vorstellen. Schauen wir uns unten einen kleinen Fall an.

DIVCSS3 abgerundetes Wort: border-radius

Grammatikstruktur

p{border-radius:5px}

Legen Sie die vier Ecken des DIV-Objektfelds fest auf 5 Pixel abgerundeter Eckeneffekt

p{border-radius:5px 0;}

Stellen Sie die oberen linken und unteren rechten Ecken des DIV-Objektfelds so ein, dass sie um 5 Pixel abgerundet sind, die andere Ecken sind 0, keine abgerundeten Ecken

p{border-radius:5px 5px 0 0;}

Setzen Sie die obere linke Ecke und die obere rechte Ecke des DIV-Objektfelds auf 5 Pixel abgerundete Ecken und die anderen beiden Ecken auf 0 ungerundete Ecken

Beschreibung:

Rahmenradius: 3px 4px 5px 6px

bedeutet, dass die obere linke Ecke des Objekts auf gesetzt wird 3 Pixel abgerundete Ecken, die obere rechte Ecke bis 4 Pixel abgerundete Ecken, die untere rechte Ecke bis 5 Pixel abgerundete Ecken und die untere linke Ecke bis 3 Pixel abgerundete Ecken.

CSS3-Fall mit abgerundeten Ecken

Legen Sie abgerundete Ecken auf zwei DIV-Boxen und ein Bild fest, um die abgerundeten CSS3-Ecken zu üben.

Fall-HTML-Code

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象圆角 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<p>盒子左上角和右上角对象圆角测试</p> 
<p class="box">DIV盒子圆角</p> 
<p>盒子对象个角圆角测试</p> 
<p class="box3">DIV盒子圆角</p> 
<p> </p> 
<p>图片对象圆角测试</p> 
<p class="box2"><img src="images/logo.gif" /></p> 
</body> 
</html>

Fall-CSS-Code:

.box {border-radius:5px 5px 0 0;border:1px solid #000;width:300px; height:80px; margin:0 auto} 
.box2 img{border-radius:5px} 
.box3{border-radius:5px 0;  background:#999;width:300px; height:80px; margin:0 auto}

Fallbeschreibung

1), das erste BOX-Feld, das beobachtet werden muss Für den Effekt „Abgerundete Ecken“ wird der Rahmenstil festgelegt und der Stil „Abgerundete Ecken“ border-radius:5px 5px 0 0; legt die abgerundeten Ecken der oberen linken Ecke und der oberen rechten Ecke fest.

2), legen Sie die Hintergrundfarbe des zweiten BOX3-Felds fest und legen Sie den Randradius für abgerundete Ecken fest: 5px 0, legen Sie die abgerundeten Ecken für die obere linke Ecke und die untere rechte Ecke fest

3 ), der dritte Legen Sie den abgerundeten Eckenstil border-radius:5px für das Bild img im Feld box2 fest und stellen Sie die vier Ecken so ein, dass sie abgerundet werden.

Es gibt so viel Wissen über den Grenzradius. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den Randradius in CSS

HTML-Bearbeitungskonverter

So geben Sie Leerzeichen in HTML ein

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Randradius in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：HTML-TabellenstileNächster Artikel：HTML-Tabellenstile

In Verbindung stehende Artikel

Mehr sehen