CSS里 怎么用盒子的下边框画一条红色的2PX的线 网页显示的时候 只有一条直线就可以了

html-css012

CSS里 怎么用盒子的下边框画一条红色的2PX的线 网页显示的时候 只有一条直线就可以了,第1张

CSS代码如下

border-bottom: 2px solid red

代码解释:

border-bottom: 表示下边框

2px:表示边框宽度

solid:实现边框

red:红色

在制作CSS动画的时候,经常会有这样的需求,

让一个方块 沿着给定的路径 运动。

如果运动路径是不规则的,通过设置 top , left 的属性值,就显得非常困难了。

这时候可以借助svg来实现。

path 元素的形状是通过它的 d 属性 定义的,

d 属性的值,是一个“命令+参数”的序列。

其中, M 20 30 L 160 180 ,包含了2个命令序列,

M 20 30 ,表示将画笔移动到坐标 20,30 处,

L 160 180 ,表示从画笔当前位置,到 160,180 位置画直线。

path元素支持多种命令,可以参考这里, curve commands

html元素的CSS样式属性 offset-path ,表示 偏移路径

通过指定 offset-path 的值为path元素的 d 属性值,我们可以实现元素沿着给定的 path 路径运动。

其中, offset-distance 指定了元素偏移初始位置的百分比。

通过在 @keyframes 中逐帧更改 offset-distance ,可以实现动画效果。

我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ,

相应的也修改小方块的 offset-path 属性。

就可以实现小方块沿着path运动的效果了。

MDN: paths

MDN: offset-path

MDN: offset-distance

A How-to Guide to SVG Animation

Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths

<td

style="border-bottom:1px

dotted

#ccc">文字内容</td>

<td

style="border(边框)-bottom(底部):1px(1像素)

dotted

(虚线)#ccc(颜色)">文字内容</td>

上面这句话的意思是:在这个td里面的样式为

底部边框为1像素颜色为#ccc的虚线

dotted

是虚线

solid

是实线