首先,让大家来实现一个圆形。
.circle { width: 100px; height: 100px; background: #F00; border-radius: 50%; }
上述代码中,大家定义了一个宽和高均为100px的div,然后给它设置了红色背景色和50%的圆角,这样就实现了一个红色的圆形。
接下来,让大家来实现一条线。
.line{ width: 200px; height: 2px; background: #000; transform: rotate(45deg); }
上述代码中,大家定义了一个宽度为200px、高度为2px的div,然后给它设置了黑色背景色,接着用transform属性对这个div进行了旋转,从而实现了一条倾斜的线。
这就是如何用CSS3实现圆形和线条的方法,希望本文能对你有所帮助。