WEB前端代码：边框阴影、边框图片、背景样式、文本样式、字体样式

本文链接：https://blog.youkuaiyun.com/weixin_43731793/article/details/96102065

本文详细介绍了CSS中边框阴影、边框图片、背景样式、文本样式、字体样式等的使用技巧，包括box-shadow、border-image、background-size、text-shadow等属性的应用方法，并通过实例展示了如何实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、边框阴影

box-shadow:5px 10px 20px #000;
1)5px 相对于原div的左上角的x偏移
2)10px 相对于原div的左上角的y偏移
3)20px 在偏移的基础上进行模糊处理
4)#000 阴影div的颜色

	.div1{
			margin:100px;
			width:256px;
			height:256px;
			background: #888;
			box-shadow:15px 15px 30px #000;
		}	
	</style>
</head>
<body>
	<div class="div1">
		
	</div>

2、边框图片

border-image:url(border.png) 30 30 round;
border: 10px solid transparent;边框
1)url边框图片地址
2)30裁剪的宽度
3)30裁剪的高度
4)round环绕
5)stretch拉伸

.div1{
			margin:100px;
			width:256px;
			height:256px;
			background: #888;
			border: 10px solid transparent;
			border-image: url(/img/border.png) 30 30 round;
		}	
	</style>
</head>
<body>
	<div class="div1"></div>

拉伸

border-image: url(/img/border.png) 30 30 stretch;

3、背景样式:

1.背景大小
background-size:100%;

2.背景位置
background-origin
1)border-box #以border来设置背景图
2)padding-box #以padding来设置背景图
3)content-box #以content实际内容来设置背景图
一个框一个图

.div1{
			margin:100px;
			width:256px;
			height:256px;
			background: url(/img/web.png) no-repeat center center;
			background-size: 100%;
			border: 1px solid #00f;
		
		}	
	</style>
</head>
<body>
	<div class="div1"></div>

一个框多个图

.div1{
			margin:100px;
			width:256px;
			height:256px;
			background: url(/img/web.png) ;
			background-size: 10%;
			border: 1px solid #00f;
		
		}

以border来设置背景图

.div1{
			margin:100px;
			width:256px;
			height:256px;
			background: #888 url(/img/web.png) no-repeat center center;
			background-size: 100%;
			border: 50px solid transparent;
			padding: 50px;
			margin: 50px;
			background-origin: border-box;
		
		}

以padding来设置背景图

background-origin: padding-box;

以content实际内容来设置背景图

background-origin: content-box;

4、文本样式:

1.text-shadow
text-shadow:5px 5px 5px #000; #文字阴影

2.word-wrap
word-wrap:break-word; #词折行(浏览器默认就会根据词折行)
word-break:break-all; #字折行

文字阴影

span{
			font-size:50px;
			color:#888;
			text-shadow:3px 3px 5px #000;
		}
	</style>
</head>
<body>
	<span>最近生意总被小乌抢走!</span>

折行

/*word-wrap:break-word; */
			word-break:break-all;

5、字体样式:

@font-face
{
font-family: fzm;
src: url(‘fzm.ttf’);
}

@font-face
		{
			font-family: cai; 
			src: url('/public/cai.otf');
		}

		span{
			font-size: 40px;
			font-weight: bold;
			font-family: cai;
		}
	</style>
</head>
<body>
	<span>最近生意总被小乌抢走!</span>

6、2D样式:

transform:
1.translate()
移动坐标
translate(30px,50px);

2.rotate()
旋转角度
rotate(30deg);

3.scale()
比例
scale(2,3);

rotate 2D旋转

.div1{
				width:256px;
				height:256px;
				
			}	

			.div1 img{
				display: block;
			}
		
	</style>
	<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
	<div class="div1">
		<img src="/img/web.png" class='img' width='100px'>
	</div>
</body>
<script>
s=0;
v=10;

setInterval(function(){
	s+=v;

	document.title=s;

	$('.div1').css({'transform':'rotate('+s+'deg)'});
},10);

scale放大倍数

.div1{
			width:256px;
			height:256px;
			background: #888;
			overflow:hidden;
		}	

		.div1 img{
			display: block;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<div class="div1">
		<img src="web.png" class='img'>
	</div>
</body>
<script>
$('.img').mouseenter(function(){
	$(this).css({'transform':'scale(1.2,1.2)'});
});

$('.img').mouseleave(function(){
	$(this).css({'transform':'scale(1,1)'});
});
</script>

translate()

	body{
				padding:50px;
				margin:0px;
			}

			.div1{
				width:256px;
				height:256px;
				
			}	

			.div1 img{
				display: block;
			}
		
	</style>
	<script src="/bootstrap4/jquery.min.js"></script>
</head>
<body>
	<div class="div1">
		<img src="/img/web.png" class='img'>
	</div>
</body>
<script>
$('.div1').click(function(){
	$(this).css({'transform':'rotate(30deg)'});

	s=0;
	v=10;
	setInterval(function(){
		s+=v;
		$('.div1').css({'transform':'rotate(30deg) translate('+s+'px,0px)'});
	},100);
});
</script>