389day(盒子圆角练习,盒子阴影;)

《2018年10月28日》【连续389天】

标题:盒子圆角练习,盒子阴影;
内容:

/*son的宽度未指定,会占满father,且不会被padding撑开;*/

.ex {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	border: 2px solid yellow;
	border-radius: 160px 0px 160px 0px;
}

389day(盒子圆角练习,盒子阴影;)

lemon;

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		.ex a {
			width: 172px;
			height: 172px;
			background-color: #fff;
			display: inline-block;
			margin: 30px;
			border-radius: 50%;
			text-align: center;
			line-height: 172px;
			color: black;
			text-decoration: none;
			font-weight: 700;

		}

		.ex a:hover {
			background-color: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="ex">
		<a href="#">可点</a>
		<a href="#">可点</a>
		<a href="#">可点</a>
		<a href="#">可点</a>
	</div>
</body>

389day(盒子圆角练习,盒子阴影;)

盒子阴影:

* {
			margin: 0px;
			padding: 0px;
		}

		.ex {
			width: 200px;
			height: 200px;
			box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
			 /*:h-shadow v-shadow blur spread color inset; */

		}

389day(盒子圆角练习,盒子阴影;)