CSS绘图：尾巴

来源：互联网发布：出国爱国知乎编辑：程序博客网时间：2024/04/26 20:42

.t_article {letter-spacing: 1px;color: #051b05;}.t_article h1 {font-size: 1.6em !important;margin-top: 12px !important;margin-bottom: 12px !important;}.t_article h2 {font-size: 1.32em !important;margin-top: 12px !important;margin-bottom: 12px !important;}.t_article h1, .t_article h2, .t_article h3 {text-shadow: 0px 0px 2px rgba(0,27,0,.3);}.t_article p {margin-top: 3px;margin-bottom: 0px;}.t_article p:last-child {margin-bottom: 3px;}.t_article ul li {margin-top: 6px;}.t_article dl dt {font-weight: bold;}.t_code {margin-top: 10px;margin-bottom: 10px;}.t_code_content {background-color: #deeefe;padding: 1em;color: #001b00;margin-left: 2em;margin-right: 2em;}.t_code_line {padding-top: 3px;}.t_code_line:last-child {padding-bottom: 3px;}.t_indent {margin-left: 2em;}.t_code_border {border: 20px solid transparent;/*background: linear-gradient(#deeefe, #deeefe) padding-box,repeating-linear-gradient(-45deg, #af7e57 0, #af7e57 1em, #deeefe 1em, #deeefe 2em, #5788af 2em, #5788af 3em, #deeefe 3em, #deeefe 4em);*/background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(90deg, transparent 0, transparent 2px, rgba(255, 155, 0, 0.5) 2px, rgba(255, 155, 0, 0.5) 6px),repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255, 155, 0, 0.5) 2px, rgba(255, 155, 0, 0.5) 6px);background-origin: border-box;}.t_code_instance {margin-top: 20px;margin-bottom: 30px;}.t_instance {width: 320px;height: 320px;margin-left: auto;margin-right: auto;border: 15px solid rgba(112, 120, 127, 0.55);border-radius: 180px;}.t_shippo {background: radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0,radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px;background-color:#9ba7b1;background-size: 60px 60px;}.t_instance:hover {box-shadow: 0 0 0 3px #d1d1d1;}.t_layer_code {border-left: 4px solid #ff9b00;margin-top: 6px;margin-bottom: 12px;padding-left: 6px;margin-left: 2em;}.t_layer_instance {width: 60px;height: 60px;margin-bottom: 12px;background-color:#9ba7b1;margin-left: 2em;}.t_repeated_unit {margin-top: 6px;background-color:#9ba7b1;background: radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0,radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px;}.t_layer1 {background: radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0;}.t_layer2 {background: radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px;background-color:#9ba7b1;}

预备知识

如果你想要理解实现方法，你需要先了解以下知识：

线性渐变
径向渐变
复杂背景图案

尾巴图案背景

CSS代码

background:

radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0,

radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px;

background-color:#9ba7b1;

background-size: 64px 64px;

重复单元
图层一效果: background: radial-gradient( transparent 30px, #9ba7b1 30px, #9ba7b1) 0 0
图层二效果: radial-gradient( #deeefe 30px, transparent 30px, transparent) 30px 30px

0 0