⽂字圆形排列htmlcss,CSS圆形列表布局
css
:root {
--bg: #fdfdfd;
--highlight1: #ED4264;
--highlight2: #FFEDBC;
--color: #1a1e24;
--font-number: Montserrat, Roboto, Helvetica, Arial, sans-serif;
--font-head: "Space Mono", Consolas, Menlo, Monaco, "Courier New", monospace;
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.list {
list-style: none;
width: 600px;
max-width: 90%;
}
.item {
display: block;
clear: both;
counter-increment: list;
padding-bottom: 4rem;
font-size: 1.1rem;
line-height: 1.375;
position: relative;html的flex布局
}
.item:before {
font: bold 2.25rem/1 var(--font-number);
content: counter(list);
width: 5rem;
height: 5rem;
float: left;
margin: 0 1.5rem 0.75rem 0;
color: var(--bg);
background: var(--highlight1) -webkit-linear-gradient(top left, var(--highlight1) 25%, var(--highlight2)); background: var(--highlight1) linear-gradient(to bottom right, var(--highlight1) 25%, var(--highlight2)); text-shadow: 0 0 2px var(--highlight1);
border-radius: 50%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-shape-outside: ellipse();
shape-outside: ellipse();
z-index: 1;
}
.item:after {
width: 2.5rem;
height: 2.5rem;
position: absolute;
top: 0;
left: 0;
content: "";
background: var(--highlight1);
z-index: -1;
border-top-left-radius: 3px;
}
.headline {
padding: 0rem 0 0 0;
margin: 0 0 1rem 0;
font: normal 2rem var(--font-head);
}
/* Demo styles */
body {
width: 100%;
height: 100%;
min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--bg); font-family: var(--font); padding: 4rem 0;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。