CSS3の境界線

今日は主に CSS3 の境界線について勉強します。これは私たちにとって何回も「border:1px 単色赤」と書いたことがあるでしょう...それでは、CSS3 は私たちにどんな驚きをもたらすでしょうか?

CSS3 では、境界線に 4 つの新しい機能があります

Border-color (境界線の色を設定)

Border-image (画像を通して境界線として設定)

Border-radius (境界線の半径)

box-shadow (影効果)

CSS3を使用すると、デザインプログラムを使用せずに、丸い境界線を作成したり、シャドウボックスや画像を境界線として追加したりすることができます

CSS3の丸い境界線-半径属性

CSS3 の角丸には、border-radius (「境界線の半径」を意味します) という 1 つの属性を設定するだけで済みます。このプロパティに値を指定して、4 隅すべての半径を同時に設定します。すべての法的な CSS 測定値 (em、ex、pt、px、パーセントなど) を使用できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">  
    div
    {
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:yellow;
    width:300px;
    height:300px;
    border-radius:25px 15px 40px 0;
    }
</style>
</head>
    <body>
    <div>观察4个角的不同 </div>
    </body>    
</html>

CSS3 box-shadow box-shadow プロパティ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
 <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
  </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>

CSS3 border-imageBorder-image

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
  <style type="text/css"> 
        .border_test
        {
            -webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            -border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
            display: block;
            
            border-width: 0 12px;
            padding: 10px;
            text-align: center;
            font-size: 26px;
            text-decoration: inherit;
            color:white;
        }
    </style>
</head>
<body>
    <div class='border_test'>CSS3 Border-image样式</div>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { border:2px solid #a1a1a1; padding:10px 40px; background:yellow; width:300px; height:300px; border-radius:25px 55px 40px 0; } </style> </head> <body> <div>观察4个角的不同 </div> </body> </html>

提出するリセットコード

自動運転