利用css中的border绘制图形

html-css019

利用css中的border绘制图形,第1张

1:position:absolute;

相对于 static 定位以外的第一个父元素进行定位。

所以a需要加一个position:relative

2: :before和:after会继承可继承的属性值;例如颜色和display;悬停的时候,color颜色改变,伪元素颜色也会随之改变;

3::before和:after必须有content,否则不显示;

可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。例如:

# image {

position: relative//图片的相对位置

animation: falling 1s linear//动画名称为falling,持续时间1s,动画速度变化线性

}

@keyframes falling {

0% { top: 0px} //初始时图片位于顶部

100% { top: 300px} //最终时图片位于300px处

}