CSS3 边框

最新推荐文章于 2024-06-28 14:24:07 发布

CopperDong

最新推荐文章于 2024-06-28 14:24:07 发布

阅读量401

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/QFire/article/details/83241675

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8"/>
	<title>shi</title>
	<style type="text/css">
		.tabs-box {
			border-bottom: 3px solid #9eaab6;
			margin: 0;
			padding: 0;
			overflow: hidden;
			zoom: 1;
		}
		.tabs-box li {
			float: left;
			display: inline;
			margin: 0 12px 0 0;
			list-style: none outside none;
			border: 1px solid #9eaab6;
			padding: 5px;
			border-image: url("border-image-tab.png") 0 5 0 5;
			border-width: 0 5px;
			text-align: center;
			text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
			color: rgba(0, 125, 200, 0.3);
		}
		.border-image-drop-boxshadow {
			width: 150px;
			height: 50px;
			padding: 10px;
			margin: 10px;
			border: 1px solid #ccc;
			border-width: 7px 7px 16px;
			border-image: url("border-image-box-shadow.png") 7 7 16 7;
		}
		.box2 {
			width: 200px;
			height: 100px;
		}
		.border-radius {
			width: 250px;
			height: 100px;
			border: 10px solid orange;
			border-width: 20px 5px 30px 60px;
			border-radius: 100px;
			border-color: orange red green blue;
		}
		img-shadow {
			display: inline-block;
			box-shadow: inset 5px 5px 10px #06c;
		}
		img {
			position: relative;
			z-index: -1;
			vertical-align: top;
		}
		.box-shadow {
			width: 200px;
			height: 100px;
			border-radius: 5px;
			border: 1px solid #ccc;
			margin: 20px;
			box-shadow: inset 3px 3px 10px blue, 5px 0 5px green;
		}
		.top {
			box-shadow: 0 -2px 5px -3px red;
		}
		.right {
			box-shadow: 2px 0 5px -3px green;
		}
		.bottom {
			box-shadow: 0 2px 5px -3px blue;
		}
		.left {
			box-shadow: -2px 0 5px -3px orange;
		}

		#formWrapper {
			width: 450px;
			padding: 8px;
			margin: 20px;
			overflow: hidden;
			border-width: 1px;
			border-style: solid;
			border-color: #dedede;
			box-shadow: 0 3px 3px rgba(255,255,255,.1),
						0 3px 0 #bbb, 0 4px 0 #aaa,
						0 5px 5px #444;

			border-radius: 10px;
			background-color: #f6f6f6;
			background-image: -webkit-gradient(linear, left top, left, bottom, from(#f6f6f6), to(#eae8e8));
			background-image: linear-gradient(top, #f6f6f6, #eae8e8);
		}
		#formWrapper .search {
			width: 330px;
			height: 20px;
			padding: 10px 5px;
			float: left;
			font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
		}

	</style>
</head>
<body>
	<ul class="tabs-box">
		<li>home</li>
		<li>CSS3</li>
		<li>Html5</li>
		<li>JavaScript</li>
		<li>jQuery</li>
	</ul>
	<div class="border-image-drop-boxshadow box1">小框</div>
	<div class="border-image-drop-boxshadow box2">大框</div>
	<div class="border-radius"></div>
	<form id="formWrapper">
		<div class="formFiled clearfix">
			<input type="text" required="" placeholder="Search" class="search">
			<input type="submit" class="btn submit" value="go">
		</div>
	</form>
	<div class="img-shadow">
		<img src="border.jpg" alt="" width="150" height="150" />
	</div>
	<div class="box-shadow"></div>
	<div class="box-shadow top"></div>
	<div class="box-shadow right"></div>
	<div class="box-shadow bottom"></div>
	<div class="box-shadow left"></div>
</body>
</html>

CopperDong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 边框

&lt;!DOCTYPE HTML&gt;&lt;html lang="en-US"&gt;&lt;head&gt; &lt;meta charset="UTF-8"/&gt; &lt;title&gt;shi&lt;/title&gt; &lt;style type="text/css"&gt; .tabs-box {
复制链接

扫一扫

专栏目录