CSS绘图：环

来源：互联网发布：360淘宝网编辑：程序博客网时间：2024/05/01 19:05

.t_article {letter-spacing: 2px;}.t_section {padding: 20px 30px;color: #040308;}.t_section a {color: #040308;padding-left: 1em;}.t_section span {font-weight: bold;}.t_circle {background: radial-gradient(circle, transparent, transparent 30px, #B7CD73 30px, #B7CD73 35px,#EDFCE2 35px, #EDFCE2 40px, #fff 40px, #fff 45px, #DBEAAD 45px, #DBEAAD 50px, #7D903F 50px, #7D903F 55px, #fff 55px, #fff 60px, transparent 60px, transparent),radial-gradient(circle, transparent, transparent 30px, #B7CD73 30px, #B7CD73 35px,#EDFCE2 35px, #EDFCE2 40px, #fff 40px, #fff 45px, #DBEAAD 45px, #DBEAAD 50px, #7D903F 50px, #7D903F 55px, #fff 55px, #fff 60px, transparent 60px, transparent) 45px 45px;background-color: #DDE7D6;background-size: 90px 90px;}.t_unit_instance {padding-bottom: 15px;background-color: #093b0c;}.t_code {display: inline-block;width: 100%;margin-top: 600px;font-family: monospace;}.t_code_line {margin: 0;}.t_code_content {color: #040308;padding: 1em 2em;background:radial-gradient(circle at top+6px left+6px, #040308 0px, #040308 6px, transparent 6px, transparent) no-repeat,radial-gradient(circle at top+6px right+6px, #040308 0px, #040308 6px, transparent 6px, transparent) no-repeat,radial-gradient(circle at bottom+6px left+6px, #040308 0px, #040308 6px, transparent 6px, transparent) no-repeat,radial-gradient(circle at bottom+6px right+6px, #040308 0px, #040308 6px, transparent 6px, transparent) no-repeat,linear-gradient(180deg, transparent 0px, transparent 4px, #040308 4px, #040308 8px, transparent 8px, transparent),linear-gradient(0deg, transparent 0px, transparent 4px, #040308 4px, #040308 8px, transparent 8px, transparent);}.t_indent {margin-left: 2em;}.t_indent_4 {margin-left: 4em;}.t_prepare {padding: 2em;font-size: small;}

background:

radial-gradient(

circle, transparent, transparent 60px, #B7CD73 60px, #B7CD73 70px,#EDFCE2 70px, #EDFCE2 80px, #fff 80px, #fff 90px, #DBEAAD 90px,#DBEAAD 100px, #7D903F 100px, #7D903F 110px,#fff 110px, #fff 120px, transparent 90px, transparent),

radial-gradient(

circle, transparent, transparent 60px, #B7CD73 60px, #B7CD73 70px,#EDFCE2 70px, #EDFCE2 80px, #fff 80px, #fff 90px, #DBEAAD 90px, #DBEAAD 100px, #7D903F 100px, #7D903F 110px, #fff 110px, #fff 120px, transparent 90px, transparent) 90px 90px;

background-color: #DDE7D6;

background-size: 180px 180px;

预备知识: 线性渐变径向渐变复杂背景图案

0 1