书小宅之网页设计——CSS3的应用_css3在网站设计中的是应用-CSDN博客

本文链接：https://blog.csdn.net/qq_36447261/article/details/97613615

使用CSS3绘制直线就是通过修改div块元素的样式来实现
伪类：after
在被选元素的内容后面插入内容。
伪类：before
在被选元素的内容后面插入内容。

CSS3绘制直线

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画线</title>
<style>
    .line1{width:200px; height:1px; background-color:#f00; display:inline-block; vertical-align:6px}
   
   .line2:before,.line2:after{content:""; width:200px; height:1px; background-color:#aaa; display:inline-block}
   .line2:before{background-color:#f00; width:50px; height:4px;;}
	  
   .line3:before,.line3:after{content:""; width:100px; height:1px; background-color:#aaa; display:inline-block; }
   
   /*交叉*/
   .line4{position: relative;}
   .line4:before,.line4:after{content: "";width: 200px;height:
   1px;background-color: #aaa;display: inline-block; vertical-align:6px}
   .line4:after{width: 2px; background-color: #f00; height: 20px; position: absolute;left: 30px;top: 3px;}
   
   .line5{width:200px; height:50px; border:5px solid hsla(192,89%,32%,1.00); margin-top:20px; border-top-style:hidden;}
</style>
</head>

<body>
<section>
	<span>形态特征</span>
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"><b>今日头条</b></div>
    <div class="line4"></div>
    <div class="line5"></div>
</section>
<script>
</script>
</body>
</html>