表单常见下边框制作

最新推荐文章于 2024-06-13 10:59:26 发布

weixin_34266504

最新推荐文章于 2024-06-13 10:59:26 发布

阅读量176

点赞数

文章标签： python

原文链接：https://my.oschina.net/shuaihong/blog/1599952

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下边框制作</title>
	<style>
		.outer {
			width: 400px;
			border:1px solid #ccc;
		}
		.vux-cell-box {
			position: relative;
			height: 40px;
			line-height: 40px;
			padding: 0 1em;
		}
		.weui-cell:after {
			content: "";
			position: absolute;
			bottom: 0;
			right: 0;
			left: 1em;
			border-bottom: 1px solid #D9D9D9;
			color: #D9D9D9;
			transform-origin: 0 0;	
			/*边框缩放0.5,高度为0.5px*/
			transform: scaleY(0.5);  
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="vux-cell-box weui-cell">
      		cell-box hello world hello world hello world
    	</div>
    	<div class="vux-cell-box weui-cell">
      		cell-box hello world hello world hello world
    	</div>
    	<div class="vux-cell-box weui-cell">
      		cell-box hello world hello world hello world
    	</div>
    	<div class="vux-cell-box">
      		cell-box hello world hello world hello world
    	</div>
	</div>
</body>
</html>

效果图：输入图片说明