ბლოკის თვისებები: border, border-radius, box-sizing, box-shadow, opacity, overflow

14-02-2021, 13:07

<!DOCTYPE HTML>
<html>
    <header>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>მთავარი გვერდი</title>
        <link  href="style.css" type="text/css" rel="stylesheet" />
    </header>
<body>
                
    <div class="sxva_bloki"></div>
    
        <div class="test">
            Lorem ipsum dolor
            ჩაამატეთ დიდი ტექსტი, ისე რომ ბლოკში არ ჩაეტიოს
            და გამოიყენეთ overflow-ს სხვადასხვა ვარიანტები        
        </div>    

    <div class="sxva_bloki"></div>    
    
</body>
</html>


   body{
     background-color: #e0d4f1;
     padding: 0;  /*ბრაუზერის სტილის მოხსნა*/
    margin: 0;
   }
   
   .sxva_bloki{
       width:100%px;
       height:50px;
       background-color: #105507;
    }
   
      
   .test{
      width: 300px;
     height: 300px;
     background-color:rgba(155, 150, 50, 0.9);
       margin:30px auto; /*ბლოკის  განთავსება ცენტრში*/

    border: 1px solid blue;
    // border-left: 2px dotted blue;
    // border-right: 2px dotted ;
    box-sizing: border-box;  /*ბლოკის ჩარჩო მოცემული ზომის შიგნით განთავსდება*/
    border-radius:10%;
   // border-top-left-radius: 25px; /*მხოლოდ ერთი მხარის მომრგვალება*/
   // border-radius: 10px 35px 10px 35px; /*განსხვავებული რადიუსები*/
   
    box-shadow: 10px 10px 15px #000;  /*ჩრდილის წანაცვლება მარჯვნივ, ქვემოთ, გადღაბნვა და ფერი*/ 
    //opacity: 0.9; /*გამჭირვალობაიმ შემთხვევაში როცა ფერი HTML Hex-თაა*/
   // overflow: hidden; /*ან auto, ან scroll*/
    text-align:center;
    padding-top: 20px; /*ზემოდან ტექსტის ჩამოწევა */
   }

ბლოკის თვისებები: border, border-radius, box-sizing, box-shadow, opacity, overflow

მსგავსი სიახლე