边框、文字

最新推荐文章于 2024-04-30 11:09:00 发布

有品位的程序员

最新推荐文章于 2024-04-30 11:09:00 发布

阅读量957

点赞数 1

分类专栏： HTML5/CSS3 文章标签： css html css3 html5

本文链接：https://blog.csdn.net/The_Handsome_Sir/article/details/106023345

版权

HTML5/CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

阴影边框和圆角效果
border-radius:8px; 设置边框圆角,值越大，角越圆
box-shadow: 10px 10px 5px #888888; 设置阴影,值分别为水平距离，垂直距离，阴影宽度，阴影颜色

<!DOCTYE html>
<html>
	<head>
		<style>
			#block1{
				width:300px;
				height:150px;
				background-color:orange;
				border-radius:15px;
				box-shadow: 10px 10px 5px #888888;
			}
		</style>
	</head>
	<body>
		<div id="block1"></div>
	</body>
</html>

效果

在这里插入图片描述
文本阴影

<!DOCTYPE html>
<html>
	<head>
		<style>
			.t1{
			font-size:80px;
			font-weight:bold;
			text-shadow: 5px 5px 5px #FF0000;
			}
		</style>
	</head>

	<body>
		<p class="t1">HTML5+CSS3</p>
	</body>
</html>

效果
在这里插入图片描述
看完点赞！！！

有品位的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
边框、文字

阴影边框和圆角效果<!DOCTYE html><html> <head> <style> #block1{ width:300px; height:150px; background-color:orange; border-radius:15px; box-shadow: 10px 10px 5px #888888; } </style> </head> <b
复制链接

扫一扫

专栏目录