css信封边框效果实现的2种方法

时间:5年前   阅读:6160

信封边框

信封描边的效果大致如下图所示,这里的边框有红白蓝三种颜色,所以可以使用重复线性渐变的方法来完成:

信封边框有两种实现思路:

1、使用背景渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.uu{
	 width: 200px;
    height: 70px;
	padding:1em;
  border: 1em solid transparent;
  background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; 
			}
		</style>
	</head>
	<body>
		<div class="uu"></div>
	</body>
</html>

2、使用边框图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.uu{
	      width: 200px;
    height: 70px;
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;
			}
		</style>
	</head>
	<body>
		<div class="uu"></div>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

上一篇:2020-03-12行情研判及操作策略-沪深期权

下一篇:股民投资沪深300ETF期权好还是50ETF期权好?

网友评论

请先 登录 再评论,若不是会员请先 注册