Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP20
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 3 жил өмнө
parent
ed71b13aeb
commit
93b1d1c7f0
2 өөрчлөгдсөн 87 нэмэгдсэн , 1 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 82 0
      4_奥运五环.html
  2. 5 1
      7_Css3/1_test.html

+ 82 - 0
4_奥运五环.html
Файл харах 

@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    div{
 
+      width: 200px;
 
+      height: 200px;
 
+      border-radius: 50%;
 
+      border-width: 10px;
 
+      border-style: solid;
 
+      position: absolute;
 
+    }
 
+
 
+    #blue{
 
+      border-color: blue;
 
+      left: 0;
 
+      top: 0;
 
+    }
 
+    div::after{
 
+      content: '';
 
+      position: absolute;
 
+      width: 200px;
 
+      height: 200px;
 
+      border-radius: 50%;
 
+      top: -10px;
 
+      left: -10px;
 
+    }
 
+    #blue::after{
 
+      border: 10px solid blue;
 
+      z-index: 1;
 
+      border-bottom-color: transparent;
 
+    }
 
+    #black{
 
+      border-color: black;
 
+      left: 230px;
 
+      top: 0;
 
+    }
 
+    #black::after{
 
+      border: 10px solid black;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #red{
 
+      border-color: red;
 
+      left: 460px;
 
+      top: 0;
 
+    }
 
+    #red::after{
 
+      border: 10px solid red;
 
+      z-index: 1;
 
+      border-left-color: transparent;
 
+    }
 
+    #yellow{
 
+      border-color: yellow;
 
+      left: 110px;
 
+      top: 110px;
 
+    }
 
+    #green{
 
+      border-color: green;
 
+      left: 340px;
 
+      top: 110px;
 
+    }
 
+    #green::after{
 
+      border: 10px solid green;
 
+      z-index: 1;
 
+      border-top-color: transparent;
 
+      border-right-color: transparent;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="blue"></div>
 
+  <div id="black"></div>
 
+  <div id="red"></div>
 
+  <div id="yellow"></div>
 
+  <div id="green"></div>
 
+</body>
 
+</html>

+ 5 - 1
7_Css3/1_test.html
Файл харах 

@@ -9,8 +9,12 @@
 
     #div1{
 
     #div1{
 
       width: 200px;
 
       width: 200px;
 
       height: 200px;
 
       height: 200px;
 
-      background: #000;
 
+      /* background: #000; */
 
       border-radius: 50%;
 
       border-radius: 50%;
 
+      border-width: 10px;
 
+      border-style: solid;
 
+      border-color: black;
 
+      border-bottom-color: transparent;
 
       /* 
       /* 
       -webkit-border-radius: 50%  为了兼容Chrome 或者 Safari
 
       -webkit-border-radius: 50%  为了兼容Chrome 或者 Safari
 
       -moz-border-radius: 50%  为了兼容火狐浏览器
 
       -moz-border-radius: 50%  为了兼容火狐浏览器