css+svg实现圆角边框多行文本输入效果代码-html代码-BFW代码库

css+svg实现圆角边框多行文本输入效果代码

代码语言：html

代码描述：css+svg实现圆角边框多行文本输入效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
:root {
	--color-bg:#34304c;
	--color-bg2:#534d7a;
	--color-highlight:#fff;
	--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
.goo {
	font-size:3rem;
	line-height:1.35;
	display:inline;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
	background:var(--color-highlight);
	padding:.5rem 1rem;
	filter:url('#goo')
}
.goo:focus {
	outline:0
}
.edit {
	display:inline-block;
	padding:.5rem 1rem;
	background:var(--color-bg2);
	text-transform:uppercase;
	font-size:.7rem;
	color:var(--color-highlight);
	border-radius:1em
}
body {
	padding:7.5vh 100px 0 100px;
	font-family:var(--font);
	background:var(--color-bg)
}

</style>
</head>

<body>
    <!-- partial:index.partial.........完整代码请登录后点击上方下载按钮下载查看