CSS：一个div画一个十字架——你也可以

马黑黑

思路：

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。先看下楼的效果，我们后面再接着分析。

马黑黑

马黑黑

一楼的代码，我们没有给生出来的伪元素做定位，目的是为了观察它的位置，从而好计算移位的尺寸。我们可以看到，它的原始位置是 ：
left: 0;
top: 0;

所以，它应当右移 45px，这样就在正中的位置了。为什么不是原元素宽度的一半50px呢？因为它自身也有10个像素的宽度，占位的，10的一半是5，100的一半是50，50-5=45。

同理，高度则需要上移45个像素。

所以，一楼CSS代码中，伪元素的代码需要加入 ——

left: 45px;
top: -45px;

同时把 background 颜色改为 red，把透明处理的 opacity 删掉，就得出三楼的效果：

马黑黑

马黑黑

占位

红影

这个好玩，记得黑黑说过before和after的伪元素可以使用一半，这个就是真实例子了。

这样可以用来玩一种回文，只是我又忘记文字如何竖排了，还得去翻翻前面的帖子

红影

不知道黑黑做一个这样的十字是派什么用途的。
黑黑每天都有新效果，太赞了

马黑黑

红影 发表于 2022-1-21 12:37
不知道黑黑做一个这样的十字是派什么用途的。
黑黑每天都有新效果，太赞了

目前没啥用途。但要学习CSS，基本的绘制能力要有，且当是练习吧

马黑黑

红影 发表于 2022-1-21 12:36
这个好玩，记得黑黑说过before和after的伪元素可以使用一半，这个就是真实例子了。

这样可以用来玩一种 ...

红影

马黑黑 发表于 2022-1-21 13:13
目前没啥用途。但要学习CSS，基本的绘制能力要有，且当是练习吧

学会了，需要用的时候就知道怎么弄了

红影

马黑黑 发表于 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
还没学会就想到用

先想到用途，就会更想学呀

马黑黑

红影 发表于 2022-1-21 15:14
先想到用途，就会更想学呀

有些事情怎么讲，就像人们指责教育与现实脱节，不是没道理，可是，不能都拿实用主义的思维去衡量教育。基本功的训练，看似没用，实则是在打基础。部队里，一直强调队列训练，原因很多，其中一条就是基础性的东西，它是军人区别于其他人的所在，它就是这样。画画也如此，一笔一画地练，谁也偷懒不了。

红影

马黑黑 发表于 2022-1-21 15:20
有些事情怎么讲，就像人们指责教育与现实脱节，不是没道理，可是，不能都拿实用主义的思维去衡量教育。基 ...

说得有道理。我也来练习一下。

红影

红影

做个小的感受一下，发现又忘记改名，结果影响上面的，现在没事了。看起来还是要多动手有些东西才能记住。

红影