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>