[分享]css3怎么画出线条

CSS3可以通过border属性来实现线条的效果，同时也可以使用伪元素:before和:after来绘制出更复杂的线条形状。

/* 单边实线 */
.border{
    border-top: 1px solid #000;
}

/* 双边虚线 */
.border{
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
}

/* 圆角边框 */
.border{
    border: 1px solid #000;
    border-radius: 10px;
}

/* 边框和阴影结合 */
.border{
    border: 1px solid #000;
    box-shadow: 0 0 5px #000;
}

/* 绘制箭头 */
.arrow{
    position: relative;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-right: 20px solid #000;
    border-bottom: 20px solid transparent;
}

.arrow:before{
    content: ';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    top: -20px;
    border-top: 20px solid transparent;
    border-right: 20px solid #000;
    border-bottom: 20px solid transparent;
}

/* 绘制垂直的线条 */
.line{
    width: 2px;
    height: 100px;
    margin: 0 auto;
    background-color: #000;
}

.line:before{
    content: ';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: -5px auto 0;
    background-color: #000;
}

/* 绘制水平的线条 */
.line{
    width: 100px;
    height: 2px;
    margin: 0 auto;
    background-color: #000;
}

.line:before{
    content: ';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: -5px 0 0 -5px;
    background-color: #000;
} 

综上所述，CSS3可以通过border、border-radius、box-shadow等属性来实现简单的线条效果，同时也可以使用伪元素:before和:after来绘制出更复杂的线条形状。在实际开发中，可以根据需求来选择不同的方式来实现线条效果。