什么叫CSS（css怎么用）

使用CSS 和 HTML 画出爱心

若要问你，世界上最流行的形状是什么？可能有一部分人会很疑惑，拿不准正确答案，但是相信更多的人则是会脱口而出，那当然是心形啦。

的确，心形，也就是爱心，是当今世界上最流行的形状。

今天，就让我教教大家如何用CSS和HTML画出爱心。

伪元素::before, ::after

在画爱心之前，首先让我们学习两个伪元素 ::before 和::after。

这里用::before作为例子来讲解，::after和::before类似。

::before

CSS 中，**::before** 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素(即默认为display:inline;可以修改为display:block;)。

语法

element::before {样式} /*在每一个p元素前插入内容*/ p::before{ content: "Hello world."; }

示例

a::before { content: "♥"; }

注意事项

::before和::after必须配合content来使用。这个属性通常用来给元素添加图片或文字。

即使是用于实现形状而非文字，content属性仍然是必须的，也就是说content属性至少是一个空字符串，即""。

画出一个大heart

思路

文字描述

心形符号是由两个半圆形突出部分拼在一起而成，上凹下尖。所以我们可以:

• 先画出一个方形• 然后利用::befoer和 ::after分别选中方形元素的第一个元素和最后一个元素，并使其形状为为方形相同颜色的圆形• 将选中的圆形分别往两个相邻的方向移动一个半径的距离• 按照上述操作之后，爱心符号就已经画出来了，但是由于前一步骤中移动方向不同的原因，可能导致爱心符号的位置并不是正着的，此时根据实际情况将爱心旋转特定的角度，即可画出正着的爱心。例如,上一步骤中，选中的两个圆形分别向左和上移动了一个半径的距离，则应该将爱心顺时针移动45度。

配图解释:

一个方形

一个正方形

一个方形和两个圆形

两个圆形初始状态是重叠在一起的一个方形和两个圆形

两个圆形移动之后

将两个图形分别向左边和上边移动一个半径的距离两个图形移动之后

更改两个圆形的颜色

更改两个圆形的颜色

将爱心顺时针旋转45度

将爱心顺时针旋转45度

具体实现如下:

实现

设置公共变量

<style> :root { /*设置宽和高*/ --width: 100px; --height: 100px; --half-radius: -50px; } </style>

创建容器

• 首先创建一个div标签，用来作为爱心的容器。• 并设置容器的高度、大小、在页面中的位置、背景颜色...<style> #heart { /*设置为绝对定位，并设置其位置*/ position: absolute; left: 0; top: 0; right: 0; bottom: 0; /*让元素居中*/ margin: auto; /*设置宽度和高度*/ width: var(--width); height: var(--height); /*设置背景颜色*/ background-color: greenyellow; } </style> <div id="heart"></div>

获取heart容器和其::before、::after元素并初始化属性

<style> #heart::before { content: ""; position: absolute; width: var(--width); height: var(--height); /*设置为圆形*/ border-radius: 50%; background-color: pink; } #heart::after { content: ""; position: absolute; width: var(--height); height: var(--width); /*设置为圆形*/ border-radius: 50%; background-color: pink; } </style>

移动::before、::after元素

将::before、::after元素分别向左、右移动一个半径的距离。

更新后的::before、::after元素的CSS代码如下: <style> #heart::before { content: ""; position: absolute; width: var(--width); height: var(--height); /*设置为圆形*/ border-radius: 50%; background-color: pink; left: var(--half-radius); /* 最后一行相当于-> right: var(--half-radius) */ } #heart::after { content: ""; position: absolute; width: var(--height); height: var(--width); /*设置为圆形*/ border-radius: 50%; background-color: pink; top: var(--half-radius); /* 最后一行相当于-> bottom: var(--half-radius) */ } </style>

顺时针旋转爱心

使用transform: rotate(45deg);将已经画好的爱心顺时针旋转45度。更新后的#heart元素的CSS代码如下: <style> #heart { /*设置为绝对定位，并设置其位置*/ position: absolute; left: 0; top: 0; right: 0; bottom: 0; /*让元素居中*/ margin: auto; /*设置宽度和高度*/ width: var(--width); height: var(--height); /*设置背景颜色*/ background-color: greenyellow; transform: rotate(45deg); } </style>

完整代码

<style> :root { --width: 100px; --height: 100px; --half-radius: -50px; } #heart { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: var(--width); height: var(--height); background-color: pink; transform: rotate(45deg); } #heart::before { content: ""; position: absolute; width: var(--width); height: var(--height); border-radius: 50%; background-color: pink; left: var(--half-radius); /* 最后一行相当于-> right: var(--half-radius) */ } #heart::after { content: ""; position: absolute; width: var(--height); height: var(--width); border-radius: 50%; background-color: pink; top: var(--half-radius); /* /* 最后一行相当于-> bottom: var(--half-radius) */ } </style> <div id="heart"></div>本文使用 文章同步助手 同步