Web前端程序设计作业--border-radius练习P183作业2

最新推荐文章于 2024-07-12 16:55:56 发布

haoshuai_121

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量85

点赞数

分类专栏： Web前端程序设计学习文章标签：前端 css html

本文链接：https://blog.csdn.net/haoshuai_121/article/details/128095483

版权

Web前端程序设计学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>haoshuai的文档2020214387</title>
<style type="text/css">

body{

	position:absolute;

	background:#000;

}



.yue{

	width: 300px;

	height: 300px;

	background: url(bg7-7.jpg);

	border-radius: 180px;

}

.text{

	position:absolute;

	left:310px;

	top:20px;

}

.text span{

  position:relative;

  color:yellow;

  font-size:65px;

  font-family:"楷体";

  font-weight:bold;

}

.text span:nth-child(2n){

  left:35px;

}

.text span:first-child{

  text-shadow:25px 20px 5px red;

}

.text span:nth-child(2){

  text-shadow:25px 20px 5px orange;

}

.text span:nth-child(3){

  text-shadow:25px 20px 5px green;

}

.text span:last-child{

  text-shadow:25px 20px 5px blue;

}

</style>

</head>

<body >

<div class="yue">

</div>

<div class="text">

  <span>中</span>

  <span>秋</span>

  <span>快</span>

  <span>乐</span>

</div>

</body>

</html>