CSS3_邊框 border 詳解_一個 div 的陰陽圖

(面試題)css

怎麼樣經過 CSS 畫一個三角形:html

1. 元素的 width 和 height 設置爲 0面試

 

2. 邊框 足夠大動畫

  •    

 

3. 須要的三角形的部分, border-top-color 設置爲 有色spa

 

4. 不須要的部分 border-right-color,border-bottom-color,border-left-color,設置爲 透明色code

  • color: rgba(0,0,0,0);
    
    // 或者
    color: #0000;
    
    // 或者
    color: transparent;

 

圓角邊框(支持全部元素,不管塊元素,仍是行內元素)orm

  • 儘管,border-radius 將 元素 變成了圓形,可是裏面的文本子元素,仍舊沿着矩形盒子進行排列。

 

  • CSS3 提供的特性: 儘管盒子的外形和位置發生了變換,可是元素在文檔流中的位置是不變的

 

  • border-radius: 50%;    // 百分比參照盒子自身。
    • 當 width = height 時,會畫一個圓形。
    • 當 width 不等於 height 時,會畫一個橢圓形。
      • 橢圓形
        #box {
            width: 300px;
            height: 200px;  
            border-radius: 150px/100px;    // x 軸半徑 / y 軸半徑
        }

 

  • 語法:
    • #box {
          border-radius: 30px 10px 50px 0;    // 左上 右上 右下 左下
          border-radius: 30px 10px 50px;
          border-radius: 30px 10px;
          border-radius: 30px;
      }

 

  • 用 CSS 畫一個半圓
  • #box {
        width: 100px;
        hright: 200px;
    
        border-radius: 0  100% 100% 0;
        // border-radius: 100% 0 0 100%;
    }
    
    #box {
        width: 200px;
        hright: 100px;
    
        border-radius: 100% 100% 0 0 ;
        // border-radius: 0 0 100% 100%;
    }

 

  • 用 CSS 畫一個扇形
    • #box {
          width: 100px;
          hright: 100px;
      
          border-radius: 100% 0 0 0;
          // border-radius: 0 100% 0 0 0;
          // border-radius: 0 0 100% 0;
          // border-radius: 0 0 0 100%;
      }

 

  • 用 CSS 畫一個太極圖
    • <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>太極圖</title>
              <style type="text/css">
                  #test_box {
                      width: 200px;
                      height: 200px;
                      border-radius: 50%;
                      margin: 30px auto;
                      
                      background-color: red;
                      position: relative;
                  }
                  
                  #test_box #left_box,
                  #test_box #right_box {
                      width: 100px;
                      height: 200px;
                      
                      float: left;
                  }
                  
                  #test_box #left_box {
                      background-color: #000;
                      border-radius: 100px 0 0 100px;
                  }
                  
                  #test_box #right_box {
                      background-color: #fff;
                      border-radius:  0 100px 100px 0;
                  }
                  
                  #test_box #top_box,
                  #test_box #bottom_box {
                      width: 100px;
                      height: 100px;
                      border-radius: 50%;
                      
                      position: absolute;
                      left: 50%;
                      margin-left: -50px;
                  }
                  
                  #test_box #top_box {
                      top: 0;
                      background-color: #000;
                  }
                  
                  #test_box #bottom_box {
                      bottom: 0;
                      background-color: #fff;
                  }
                  
                  #test_box #top_box #white_dot,
                  #test_box #bottom_box #black_dot {
                      width: 20px;
                      height: 20px;
                      border-radius: 50%;
                      position: absolute;
                      top: 0;
                      left: 0;
                      bottom: 0;
                      right: 0;
                      margin: auto;
                  }
                  
                  #test_box #top_box #white_dot {
                      background-color: #fff;
                  }
                  
                  #test_box #bottom_box #black_dot {
                      background-color: #000;
                  }
              </style>
          </head>
          
          <body>
              
              <div id="test_box"> 
                  <div id="left_box">
                  </div>
                  
                  <div id="right_box">
                  </div>
                  
                  <div id="top_box">
                      <div id="white_dot"></div>
                  </div>
                  
                  <div id="bottom_box">
                      <div id="black_dot"></div>
                  </div>
              </div>
      
          </body>
      </html>

 

只用一個 <div> 畫太極陰陽圖 htm

  • <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>神分陰陽</title>
    
            <style type="text/css">
                body {
                    width: 100%;
                    color: #000;
                    background: #96b377;
                    font: 14px Helvetica, Arial, sans-serif;
                }
                #test_box {
                    width: 100px;
                    height: 200px;
                    border-right: 100px solid #fff;
                    border-radius: 50%;
                    margin: 30px auto;
                    
                    background-color: #000;
                    position: relative;
                    top: 0px;
                    left: 0px;
                }
                
                #test_box:before {
                    content: "";
                    
                    width: 20px;
                    height: 20px;
                    
                    border: 40px solid #000;
                    border-radius: 50%;
                    background-color: #fff;
                    
                    position: absolute;
                    top: 0px;
                    left: 100%;
                    margin-left: -50px;
                    
                            /* 左右 上下 模糊 顏色 */
                    box-shadow: 4px 0px 4px #a66fe2;
                }
                
                #test_box:after {
                    content: "";
                    
                    width: 20px;
                    height: 20px;
                    
                    border: 40px solid #fff;
                    border-radius: 50%;
                    background-color: #000;
                    
                            /* 左右 上下 模糊 顏色 */
                    box-shadow: -5px 0px 4px #c4d0a7;
                    
                    position: absolute;
                    bottom: 0px;
                    left: 100%;
                    margin-left: -50px;
                }
            </style>
        </head>
        
        <body>
            
            <div id="test_box">
                
            </div>
    
        </body>
    </html>

 

  • 弧形凹陷 評論框
    • <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>弧形凹陷 評論框</title>
      
              <style type="text/css">
                  body {
      background-color: #96b377;

      #test_box
      { width: 800px; height: 300px; margin: 300px auto 0px; border: 1px solid red; background-color: skyblue; position: relative; top: 0px; left: 0px; } #test_box #arc { width: 100px; height: 100px; border-radius: 50%; background-color: #96b377; border: 1px solid red; position: absolute; top: -70px; left: 70px; } #test_box #arc #mask { width: 102px; height: 100px; background-color: #96b377; position: absolute; top: -32px; left: -1px; } #test_box #arc #circle_login { width: 70px; height: 70px; border-radius: 50%; background-color: #ccc; text-align: center; line-height: 70px; font-size: 24px; position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="test_box"> <div id="arc"> <div id="mask"></div> <div id="circle_login"> 登陸 </div> </div> </div> </body> </html>

 

  • 四葉草 旋轉     初探 CSS3 動畫
    • <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>四葉草旋轉 初探 CSS 動畫</title>
      
              <style type="text/css">
                  body {
                      width: 100%;
                      color: #000;
                      background: #96b377;
                      font: 14px Helvetica, Arial, sans-serif;
                  }
      
                  #test_box {
                      width: 624px;
                      height: 624px;
                      margin: 60px auto;
                      list-style: none;
                      
      animation: turnAround 1s linear infinite;
                  }
      
      @keyframes turnAround {
          from {transform: rotate(0deg)}
          to {transform: rotate(360deg)}
      }
                  
                  #test_box li {
                      float: left;
                      width: 300px;
                      height: 300px;
                      margin: 5px;
                      
                      border: 1px solid red;
                      background-color: #eee;
                  }
                  
                  #test_box li:nth-child(1),
                  #test_box li:nth-child(4) {
                      border-radius: 0 230px 0 230px;
                  }
                  
                  #test_box li:nth-child(2),
                  #test_box li:nth-child(3) {
                      border-radius: 230px 0 230px 0;
                  }
                  
              </style>
          </head>
          
          <body>
              
              <ul id="test_box"> 
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
      
          </body>
      </html>
相關文章
相關標籤/搜索