CSS：一个div画一个十字架——你也可以
本帖最后由 马黑黑 于 2022-1-21 11:14 编辑思路：
div设为100×10，再用伪元素 ::before 或 ::after 生成一个 10×100的div代码如下：
<style type="text/css">
.十 {
position: relative; /* 相对定位 */
top: 100px;
background: red;
width: 100px;
height: 10px;
}
.十::before {
content: ""; /* 这句不能缺，它的作用是让伪元素工作 */
position: absolute; /* 绝对定位 */
width: 10px;
height: 100px;
/* 下面特意设置不同的背景色和透明以方便观察
*/
background: orange;
opacity: 0.6;
}
</style>
上面，我们设计了一个 100×10 的div，并令其生出一个 10×100 的伪div。先看下楼的效果，我们后面再接着分析。
<style type="text/css">
.十 {
position: relative;
top: 100px;
background: red;
width: 100px;
height: 10px;
}
.十::before {
content: "";
position: absolute;
width: 10px;
height: 100px;
background: orange;
opacity: 0.6;
}
</style>
<div class="十"></div>
本帖最后由 马黑黑 于 2022-1-21 12:13 编辑
一楼的代码，我们没有给生出来的伪元素做定位，目的是为了观察它的位置，从而好计算移位的尺寸。我们可以看到，它的原始位置是 ：
left: 0;
top: 0;
所以，它应当右移 45px，这样就在正中的位置了。为什么不是原元素宽度的一半50px呢？因为它自身也有10个像素的宽度，占位的，10的一半是5，100的一半是50，50-5=45。
同理，高度则需要上移45个像素。
所以，一楼CSS代码中，伪元素的代码需要加入 ——
left: 45px;
top: -45px;
同时把 background 颜色改为 red，把透明处理的 opacity 删掉，就得出三楼的效果：
本帖最后由 马黑黑 于 2022-1-21 11:54 编辑 <br /><br /><style type="text/css">
.cross {
position: relative;
top: 100px;
background: red;
width: 100px;
height: 10px;
}
.cross::before {
content: "";
position: absolute;
width: 10px;
height: 100px;
background: red;
left: 45px;
top: -45px;
}
</style>
<div class="cross"></div> 占位 这个好玩，记得黑黑说过before和after的伪元素可以使用一半，这个就是真实例子了。
这样可以用来玩一种回文，只是我又忘记文字如何竖排了，还得去翻翻前面的帖子{:4_173:} 不知道黑黑做一个这样的十字是派什么用途的。
黑黑每天都有新效果，太赞了{:4_187:} 红影 发表于 2022-1-21 12:37
不知道黑黑做一个这样的十字是派什么用途的。
黑黑每天都有新效果，太赞了
目前没啥用途。但要学习CSS，基本的绘制能力要有，且当是练习吧 红影 发表于 2022-1-21 12:36
这个好玩，记得黑黑说过before和after的伪元素可以使用一半，这个就是真实例子了。
这样可以用来玩一种 ...
{:4_170:} 马黑黑 发表于 2022-1-21 13:13
目前没啥用途。但要学习CSS，基本的绘制能力要有，且当是练习吧
学会了，需要用的时候就知道怎么弄了{:4_173:} 马黑黑 发表于 2022-1-21 13:13
笑什么啊，真的是十字回文呢。 红影 发表于 2022-1-21 14:56
学会了，需要用的时候就知道怎么弄了
就是这个意思啊。其实做几个简单练习总是有用的。 红影 发表于 2022-1-21 14:57
笑什么啊，真的是十字回文呢。
还没学会就想到用 马黑黑 发表于 2022-1-21 15:08
就是这个意思啊。其实做几个简单练习总是有用的。
代码可以模拟出真实形态，这种感觉让人惊奇。 马黑黑 发表于 2022-1-21 15:11
还没学会就想到用
先想到用途，就会更想学呀{:4_189:} 红影 发表于 2022-1-21 15:14
先想到用途，就会更想学呀
有些事情怎么讲，就像人们指责教育与现实脱节，不是没道理，可是，不能都拿实用主义的思维去衡量教育。基本功的训练，看似没用，实则是在打基础。部队里，一直强调队列训练，原因很多，其中一条就是基础性的东西，它是军人区别于其他人的所在，它就是这样。画画也如此，一笔一画地练，谁也偷懒不了。 马黑黑 发表于 2022-1-21 15:20
有些事情怎么讲，就像人们指责教育与现实脱节，不是没道理，可是，不能都拿实用主义的思维去衡量教育。基 ...
说得有道理。我也来练习一下。 <style type="text/css">
.crosss {
position: relative;
top: 50px;
background: BlueViolet;
width: 60px;
height: 6px;
}
.crosss::before {
content: "";
position: absolute;
width: 6px;
height: 60px;
background: BlueViolet;
left: 27px;
top: -27px;
}
</style>
<div class="crosss"></div> 做个小的感受一下，发现又忘记改名，结果影响上面的，现在没事了。看起来还是要多动手有些东西才能记住。
<style type="text/css">
.lianxi {
position: relative;
top: 150px;
left: 200px;
background: MediumSlateBlue;
width: 60px;
height: 6px;
}
.lianxi::before {
content: "";
position: absolute;
width: 6px;
height: 60px;
background: MediumSlateBlue;
left: 27px;
top: -27px;
}
</style>
<div class="lianxi"></div>