网页制作中如何对文字添加圆形背景图案
发布网友
发布时间：2022-04-23 09:46
共2个回答
热心网友
时间：2022-04-19 08:32
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<style type="text/css">
.radius{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}/*半径*/
.transform{
transform:rotate(45deg);
float: left;
}/*旋转*/
.box-shadow{
box-shadow: 7px 2px 20px #000;
}/*盒子阴影 x y 阴影模糊值 颜色*/
input[type=button]{
background: green;
border:0;
cursor: pointer;
color: white;
float: right;
}
.content{padding: 20px;background: pink;overflow: hidden;}
.model{width: 50px;height: 50px;background: blue;color: white}
.square{}
.circle{margin-left:20px;border-radius:50px;float: left;}
</style>
</head>
<body>
<div class="content radius">
<div class="model square transform box-shadow">321321</div>
<div class="model circle box-shadow"></div>
<input type="button" value="change" class="box-shadow">
</div>
</body>
</html>
复制 粘贴到你的 html文件 用 google 或者 火狐 或者Opera 或者 safari 打开 看看~~~
热心网友
时间：2022-04-19 09:50
网页中的图片大都在PS里处理，在该软件里直接新建一个透明背景的文件，画园填充你需要的颜色并在图上打上文字（如果文字需要有链接可在网页制作软件中加入），保存为WEB格式的PNG文件即可。
