像下图这样,底下一个透明块,然后上边有与透明块四个边边距相等的虚线边框
、
我试了很久,只能做到虚线边框的上和左右与透明块边距相等,但下边距特别大。
自学了一星期,不是很明白,求各位大神解答,谢谢~
代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>赖美云土味情话</title>
<script type="text/javascript">
function showMsgs()
{
var msg = document.getElementById("msg").value;
var showMsg = document.getElementById("showMsg");
showMsg.value = msg;
}
</script>
<style>
.bor{border:1px dashed #FFF}
div.main{
background-color: rgb(206,162,177,.3);
height:1200px;
width:1000px;
padding: 10px auto;
margin:0px auto;
overflow: hidden;
}
</style>
</head>
<body style=" background:url(bg.jpg) no-repeat fixed;
background-size: 100%;">
<article>
<div class="main">
<div style="margin:10px 10px 10px 10px"; class="bor">
<div style="text-align: center;";>
<h1 style="font-family:arial;color:rgb(206,162,177);font-size:40px;">赖美云土味情话大放送</h1>
<video id="video1" width="758" autoplay controls>
<source src="赖美云的土味情话.mp4" type="video/mp4">
</video><br><br><br><br>
<h2 style=font-family:arial;color:rgb(206,162,177);font-size:30px>评论区</h2>
<textArea id='showMsg' disabled rows="10" cols="115" style="resize: none; background-color:rgb(206,162,177,.6);" ></textArea><br>
<textArea id='msg' rows="10" cols="115" style="resize: none; background-color:rgb(199,201,216,.6)" placeholder="请输入赞美小七的话" ></textArea><br>
<input type='button' value='提交' onclick="showMsgs()" style="color:white;background-color:rgb(206,162,177); border:none;">
</div>
</div>
</div>
</article>
<footer style="background-color:rgb(206,162,177,.8);height:100px;width:1000px;margin:0px auto;">
</footer>
</body>
</html>