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>
