看错了，以为你要缩进br的行距!
你按照hero4u(孤竹林)的方法改进一下，可以在服务端就组合好，如：
str
=
"
<p>
"&replace(str,
"
",
"
</p>
<p>
")&
"
</p>
"
在客户端写CSS样式：
p
{text-indent:
4px}
要点：给需要磨砂的div(设rgba的那个元素) =>设置伪元素；
给伪元素content: ''、绝对定位，四处为0,left：0....
给伪元素一样的背景图，并给z-index: -1 、给自身z-index:1 ***重要，必须给！
最后给 伪元素 filter: blur(37px) 属性值，效果就出来了。
body{
background: url(./heroheart.jpg)
background-size: cover
}
#app{
margin: 100px auto
width: 600px
height: 370px
background: rgba(0,0,0,.5)
padding: 100px
position: relative
z-index: 1
}
#app::after{
position: absolute
left: 0top: 0
bottom: 0right: 0
content: ''
background: url(./heroheart.jpg)
background-size:cover
z-index: -1
filter: blur(37px)
}
p{
font-size: 28px
color: #FFFFFF
margin-bottom: 30px
}
<div id="app">
<p>时间带走了回不去的青春，</p>
<p>却带不走我一往无前的心！</p>
<p>世间万物，万般困难、</p>
<p>能耐我何？</p>
</div>
左边的快加上 float:left,右边的块加上float:right,只要这两个块的宽度不超过父块的宽就能在同一水平线上了。想让鼠标放按钮上显示不同颜色，可以不用CSS，你可以做几个颜色的图片，用鼠标响应事件，当鼠标放到按钮上，按钮调取指定图片，鼠标离开，再调取响应图片。如果用CSS原理也一样，鼠标放上，触发一个时间，JAVASCRIPT改变这个按钮CSS控制颜色的属性。
