ホームページ > 記事 > ウェブフロントエンド > border-radius 要素に丸い境界線を追加する方法

border-radius 要素に丸い境界線を追加する方法

php中世界最好的语言オリジナル: 2018-01-20 09:35:222160ブラウズ

今回は、border-radius 要素に丸い境界線を追加する方法と、border-radius 要素に丸い境界線を追加するための注意事項について説明します。実際のケースを見てみましょう。

border-radius:10px; /* すべての角は半径 10px で丸められます*/

border-radius: 5px 4px 3px 2px; /* 4 つの半径の値は左上隅、右上隅、右下隅と左下隅、時計回り */

border-radius の値は px 単位のみであるとは考えないでください。パーセンテージや ems も使用できますが、互換性はまだあまり良くありません。

実線の上半円:

方法: 高さを幅の半分に設定し、要素の高さと一致するように左上隅と右上隅の半径のみを設定します (より大きくても問題ありません)。

div{   
　　height:50px;/*是width的一半*/   
　　width:100px;   
　　background:#9da;   
　　border-radius:50px 50px 0 0;/*半径至少设置为height的值*/   
　　}

実線の円:

方法: 幅と高さの値が一定になるように設定し (つまり正方形)、4 つの丸い角の値をその値の半分に設定します。

次のコード:

div{   
　　height:100px;/*与width设置一致*/  
　　width:100px;   
　　background:#9da;   
　　border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/  
　　}

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>border-radius</www.dztcsd.com/title>  
<style type="text/css">  
div.circle{   
    height:100px;/*与width设置一致*/   
    width:100px;   
    background:#9da;   
    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/   
    }   
/*任务部分*/      
div.semi-circle{    
    height:100px;   
    width:50px;   
    background:#9da;   
    border-radius:?;   
    }   
      
</style>  
</head>  
<body>  
<div class="circle">  
</div>  
<br/>  
<!--任务部分-->  
<div class="semi-circle">  
</div>  
  
</body>  
</html>

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。