So legen Sie abgerundete Ränder in CSS fest

Die Möglichkeit, einen abgerundeten Rand in CSS festzulegen, besteht darin, den abgerundeten Rand [border-radius] zu verwenden. Wenn die abgerundeten Ecken dieser vier Bogenmaße gleich sind, kann er als [border-radius: 30px;] geschrieben werden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So legen Sie abgerundete Ränder in CSS fest:

Grundlegende Verwendung abgerundeter Ränder (Rahmenradius):

Die grundlegendste Verwendung abgerundeter Ränder besteht darin, vier abgerundete Ecken mit demselben Bogen festzulegen

boder-top-left-radius：30px；      //左上角
boder-top-right-radius：30px；   //右上角
boder-bottom-left-radius：30px；  //右下角
boder-bottom-right-radius：30px； //左下角

Wenn diese vier Die abgerundeten Ecken von zwei Bogenmaßen sind gleich und können wie folgt geschrieben werden:

border-radius：30px；

css set abgerundeten Rand:

css-Teil:

.div1{
            margin:0 auto;
            background: darkcyan;
            width:200px;
            height:200px;
            border:2px solid darkslategray;
            border-radius:30px;
            text-align: center;
            line-height: 200px;
        }

html-Teil:

 <div class="div1">圆角边框</div>

Der Effekt ist wie gezeigt:

Empfohlen Verwandte Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie abgerundete Ränder in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!