css3学习-CSDN博客

本文链接：https://blog.csdn.net/qq_43552118/article/details/84112117

边框（border）

边框的圆角（border-radius）

边框阴影（box-shadow）

边框的图片（border-image/border-image-source）

border-image-repeat：边框图片平铺方式

border-image-slice：图片裁剪区域

border-image-width：边框图片的厚度

border-image-ouset：设置边框背景图向外拓展的距离

案例:

浏览器的私有化前缀

-moz：设置火狐的私有化前缀

-webkit：设置苹果和谷歌

-o ：设置欧朋浏览器的前缀

-ms：设置IE的前缀


<title></title>
		<style type="text/css">
			.pic1{
				border: 1px solid red; 
				width: 400px;
				height:400px;
				background: greenyellow;
				border-top: 200px solid blue;
				border-bottom: 200px solid palevioletred;
				border-right: 200px solid yellow;
				border-left: 200px solid peru;
			}
			.pic2{
				width: 300px;
				height: 100px;
				border: 1px solid gray;
                box-shadow: 5px 5px 27px red, -5px -5px 27px green;
                box-shadow:inset 20px 10px 15px rgb(68,68,68),-10px 20px 20px red;
			}
		</style>
</head>
	<body>
		<div class="pic1"></div>
		<br />
		<div class="pic2"></div>
	</body>

文本的阴影的属性

Text-shadow：10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色），10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色）

<style type="text/css">
		div{
			border: 1px solid black;
			width: 700px;
			height:300px;
			margin: 100px auto;
			background: gainsboro;
		}
			p{
				color:black;
				font-size:50px;
				font-family: "新宋体";
				font-weight: 900;
				text-shadow: 10px 10px 8px green,-10px -10px 8px red;
			}
		</style>
</head>
	<body>
	<div>
		<p>我从远方来到陌生的地方</p>
		<p>就像不知沉睡了多少个年头</p>
	</div>
	</body>

内阴影：Text-shadow：inset 10px（水平偏移量） 20px（垂直的偏移量） 10px（模糊程度） 2px（阴影的大小） #fff（阴影的颜色）

盒子模型

盒子模型具备的条件：

Content（内容）
Padding（内边距）
Border（边框）
Margin（外边距）

案例:

<style type="text/css">
			div{
				width: 300px;
				height: 150px;
				/*border: 1px solid red;*/
				float: left;
				margin-top: 50px;
				margin-right: 20px;
			}
			img{
				/*width: 300px;
				height: 150px;*/
				width: 100%;
				height: 100%;
			}
			div:hover{
				
				border: 5px solid gray;
			}
		</style>
</head>
	<body>
		
		<div>
			<img src="img/1.jpg" />
		</div>
		<div>
			<img src="img/2.jpg" />
		</div>
		<div>
			<img src="img/3.jpg" />
		</div>
	</body>