CSS小温泉

花简静

凡哥 发表于 2024-6-3 21:15
木有

那也木有关系，等等总会有的

凡哥

花简静 发表于 2024-6-3 21:56
那也木有关系，等等总会有的

有木有随意，不强求

凡哥

2024年6月4日 星期二

上面效果，是元素和它的两个伪元素：带点边框的是元素，两个伪元素中，一个突破了宿主的范围（四边各突破10px），另一个在宿主元素之内（各边里宿主元素对应边缘10px）。这里主要演示 inset 属性快速定位子元素，代码附后：

1. <style>
2. .aBox { margin: 50px; width: 400px; height: 200px; border: 2px dotted red; position: relative; }
3. .aBox::before, .aBox::after { position: absolute; content: ''; }
4. .aBox::before { background: rgba(0, 128, 0, .2); inset: 10px; }
5. .aBox::after { background: rgba(0, 0, 128, .2); inset: -10px; }
6. </style>
7. <div class="aBox"></div>

复制代码

花简静

凡哥 发表于 2024-6-4 13:18
.aBox { margin: 50px; width: 400px; height: 200px; border: 2px dotted red; position: relative; }
.a ...

虚线边框好看得很

花简静

凡哥 发表于 2024-6-4 12:46
有木有随意，不强求

随遇而安

凡哥

花简静 发表于 2024-6-4 20:07
随遇而安

样纸挺好

凡哥

花简静 发表于 2024-6-4 20:07
虚线边框好看得很

它不是重点

凡哥

2024年6月5日 星期三

彩色流动边框的实现

<style> #bbox {     margin: auto;     width: 400px;     height: 200px;     overflow: hidden;     display: grid;     place-items: center;     position: relative; } #bbox::before, #bbox::after {     position: absolute;     content: '';     z-index: -1; } #bbox::before {     width: 460px;     height: 460px;     background: linear-gradient(red, green, orange, blue);     border-radius: 50%;     animation: rot 4s linear infinite; } #bbox::after {     background: silver;     inset: 4px; } @keyframes rot { to { transform: rotate(360deg); } } </style>   <div id="bbox"></div>

效果：

现形

花简静

凡哥 发表于 2024-6-5 12:16
样纸挺好

我看也不错

花简静

凡哥 发表于 2024-6-5 20:04
本帖最后由 凡哥 于 2024-6-5 20:06 编辑
.mum { position: relative; margin: 0; padding: 10px; font:  ...

还可以看原形，这个直观演示太好了。。帮助理解边框来历