<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <!-- css块的内容 --> <style type="text/css"> * { font-size: 1.25rem; background-color: #000000; float: left; } div h1 { text-align: center; /* background-color: #000000; */ color: lightcyan; border-radius: 1.25rem; background-image: linear-gradient(105deg, #661a08, #664608, #426608, red, #12c36a, #35e5ce, #3ea1ee, #3e6fee, #6b3eee, #c06eea, #e36eea, #ea6ebd, pink); } div { border: 2px solid lawngreen; height: 6.25rem; width: 12.5rem; /* background-color: lightblue; */ margin: 0.625rem; } /* 选择器 */ div:nth-child(2) { background-image: radial-gradient(yellow 50%, skyblue 0); background-image: radial-gradient(ellipse, yellow 50%, skyblue 0); } div:nth-child(3) { background-image: radial-gradient(yellow 50%, skyblue 0); background-image: radial-gradient(circle, pink 50%, skyblue 0); } div:nth-child(4) { background-image: radial-gradient(yellow 50%, skyblue 0); background-image: radial-gradient(circle at left center, pink 50%, skyblue 0); } div:nth-child(5) { background-image: radial-gradient(yellow 50%, skyblue 0); background-image: radial-gradient(at left top, pink 50%, skyblue 0); } /* null a2/x2+b2/y2=1 */ div:nth-child(6) { width: 18.75rem; background-image: radial-gradient(yellow 50%, skyblue 0); } div:nth-child(7) { width: 18.75rem; height: 12.5rem; background-image: radial-gradient(circle at left top, transparent 20%, skyblue 0); } div:nth-child(8) { width: 18.75rem; height: 12.5rem; background-image: radial-gradient(circle at left bottom, transparent 20%, skyblue 0); } div:nth-child(9) { width: 18.75rem; height: 12.5rem; background-image: radial-gradient(circle at right bottom, transparent 20%, skyblue 0); } div:nth-child(10) { width: 18.75rem; height: 12.5rem; background-image: radial-gradient(circle at right top, transparent 20%, skyblue 0); } div:nth-child(11) { width: 200px; height: 200px; position: relative; background-image: radial-gradient(circle at right top, #fff, #fff 20px, transparent 11px), radial-gradient(circle at right bottom, #fff, #fff 30px, transparent 11px); background-color: pink; } div:nth-child(12) { width: 200px; height: 200px; position: relative; background-image: radial-gradient(circle at right top, #fff, #fff 20px, transparent 11px), radial-gradient(circle at right bottom, #fff, #fff 30px, transparent 11px), radial-gradient(circle at left bottom, #fff, #fff 30px, transparent 11px); background-color: red; } div:nth-child(13) { width: 200px; height: 200px; position: relative; background-image: radial-gradient(circle at right top, #fff, #fff 20px, transparent 11px), radial-gradient(circle at right bottom, #fff, #fff 30px, transparent 11px), radial-gradient(circle at left bottom, #fff, #fff 30px, transparent 11px), radial-gradient(circle at left top, #fff, #fff 30px, transparent 11px); background-color: pink; } .radial-gradient:after { content: ''; position: absolute; top: 0px; bottom: 0px; left: -5px; width: 10px; height: 100%; background: radial-gradient(circle, #fff, #fff 4px, transparent 5px); background-size: 10px 10px; } .radial-gradient { width: 200px; height: 200px; position: relative; background-image: radial-gradient(circle at right top, #fff, #fff 10px, transparent 11px), radial-gradient(circle at right bottom, #fff, #fff 10px, transparent 11px); background-color: black; } div:nth-child(15) { width: 200px; height: 200px; position: relative; background-image: radial-gradient(circle at right top, #fff, #fff 20px, transparent 11px), radial-gradient(circle at right bottom, #fff, #fff 30px, transparent 11px), radial-gradient(circle at left bottom, #fff, #fff 30px, transparent 11px), radial-gradient(circle at left top, #fff, #fff 30px, transparent 11px); background-color: lightblue; } div:nth-child(16) { position: relative; background: radial-gradient(circle at right top, transparent 25px, pink 0)right top, radial-gradient(circle at right bottom, transparent 25px, pink 0)right bottom; background-size: 100% 50%; background-repeat: no-repeat; } div:nth-child(16)::after { content: " "; display: block; width: 15px; height: 100%; background-color: red; background-image: radial-gradient(circle at left, transparent 5px, pink); background-size: 15px 15%; position: absolute; top: 0; bottom: 0; left: -0.5rem; } div:nth-child(17) { position: relative; background: radial-gradient(circle at right top, transparent 25px, pink 0)right top, radial-gradient(circle at right bottom, transparent 30px, pink 0)right bottom; background-size: 100% 50%; background-repeat: no-repeat; } div:nth-child(17)::after { content: " "; display: block; width: 15px; height: 100%; background-color: yellow; background-image: radial-gradient(circle at left, transparent 5px, green); background-size: 15px 15%; position: absolute; top: 0; bottom: 0; left: -0.5rem; } </style> </head> <body> <div> <h1>这些图形你知道吗.知识源自自己的实战</h1> </div> <div>100011</div> <div>100012</div> <div>100013</div> <div>100014</div> <div>100015</div> <div>100016</div> <div>100017</div> <div>100018</div> <div>100019</div> <div>100020</div> <div>1000111</div> <div>1000122</div> <div class="radial-gradient">1000133</div> <div>1000144</div> <div>1000155</div> <div>1000166</div> </body> </html>
