【html】如何利用HTML+CSS制作自己的印章

embedded/2024/10/25 14:32:48/

大家有没有尝试过用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

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  


http://www.ppmy.cn/embedded/50269.html

相关文章

Web前端教程PPT:深入浅出引领您掌握前端技术

Web前端教程PPT&#xff1a;深入浅出引领您掌握前端技术 在数字化时代&#xff0c;Web前端技术成为了构建精美网页和高效应用的基石。为了帮助初学者系统地掌握前端技术&#xff0c;本文将以PPT的形式&#xff0c;从四个方面、五个方面、六个方面和七个方面&#xff0c;为您呈…

SpringBoot修改banner

在resources目录下创建banner.txt文件 到该网站下选择banner https://www.bootschool.net/ascii-art 点击拷贝&#xff1a; 粘贴到banner.txt中&#xff0c;保存 重新运行项目即可&#xff1a;

NLP——电影评论情感分析

python-tensorflow2.0 numpy 1.19.1 tensorflow 2.0.0 导入库 数据加载 数据处理 构建模型 训练 评估 预测 1.基于2层dropout神经网络 2.基于LSTM的网络 #导入需要用到的库 import os import tarfile import urllib. request import tensorflow as tf import numpy a…

Mysql知识点

1. 二叉树 1.1 什么是B-树 B树又名平衡多路查找树&#xff08;也把B树称为B-树&#xff09;查找路径不只两个&#xff0c;不同于常见的二叉树&#xff0c;它是一种多叉树&#xff0c;我们常见的使用场景一般是在数据库索引技术里&#xff0c;大量使用者B树和B树的数据结构。 …

【Spine学习06】之IK约束绑定,制作人物待机动画,图表贝塞尔曲线优化动作

引入IK约束的概念&#xff1a; 约束目标父级 被约束骨骼子集 这样理解更好&#xff0c;约束目标可以控制被约束的两个骨骼运作 IK约束绑定过程中呢&#xff0c;如果直接绑定最下面的脚掌骨骼会发生偏移&#xff0c;所以在开始处理IK之前&#xff0c;需要先设置一个ROOT结点下的…

MySQL数据库入门

1、MySQL概述 MySQL官方网站 https://www.mysql.com/downloads/ MySQL被Oracle公司收购了&#xff0c;作者又重新编写了一个开源的数据库管理系统&#xff0c;Mariadb 2、MySQL产品&版本 2、数据库在网站架构中的角色 LAMP LNMP网站架构 3、安装MySQL-基于yum 查…

SpringBoot怎么实现自定义接口全局异常捕获?详细教程

自定义异常 package com.single.bean;import org.springframework.core.NestedRuntimeException;public class FDWException extends NestedRuntimeException {private static final long serialVersionUID = 6046035491210083235L;public FDWException(String msg) {super(msg…

mybatis中resultMap和resultType的区别

总结 基本映射 &#xff1a;&#xff08;resultType&#xff09;使用resultType进行输出映射&#xff0c;只有查询出来的列名和pojo中的属性名一致&#xff0c;该列才可以映射成功。&#xff08;数据库&#xff0c;实体&#xff0c;查询字段,这些全部都得一一对应&#xff09;…