大家有没有尝试过用HTML和CSS制作自己的印章.
首先印章具有两个最基本的特点就是它是圆形的并且有边框
当然它还有一些其他的属性吗，废话不多说我们直接上源码：
效果图：
源码：
html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>印章效果</title>
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<div id="con">
<div id="box">
内容
</div>
</div>
</body>
</html>css：
#con {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 为了垂直居中 */
margin: 0;
padding: 0;
overflow: hidden;
}
#box {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px; /* 调整字体大小 */
color: #f00; /* 字体颜色 */
font-weight: bold; /* 字体粗细 */
font-family: 'SimSun', serif; /* 使用更传统的字体 */
border: 3px solid #f00;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #fff, #f8f8f8 50%, #f0f0f0); /* 添加背景渐变模拟纹理 */
box-shadow: 0 0 10px 5px rgba(255, 0, 0, 0.5); /* 添加阴影和光泽效果 */
position: relative;
}
#box::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px dashed #f00;
border-radius: 50%;
opacity: 0.5;
}大家将HTML写好之后记得再新建一个CSS文件名字叫做 styles.css
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 【html】如何利用HTML+CSS制作自己的印章
发表评论 取消回复