文字阴影
text-shadow: 5px 5px 5px #000;
text-shadow: 水平位置 垂直位置 阴影半径 颜色
可设置多层阴影
text-shadow: 5px 5px 5px #000, text-shadow: 15px 15px 15px #fff;
盒子阴影
box-shadow: 5px 5px 5px #000;
box-shadow: 水平位置 垂直位置 阴影半径 颜色
可设置多层阴影
box-shadow: 5px 5px 5px #000, text-shadow: 15px 15px 15px #fff;
图片边框
注：此边框需进行计算
#box{
width: 300px;
height: 300px;
margin: 100px auto;
background-color: gold;
border: 1px solid transparent;
border-image-source: url(img/border.png);
border-image-slice: 26 26 26 26;
border-image-width: 20px;
/*边框是否应平铺(repeated),铺满(round),拉伸(stretch)*/
border-image-repeat: round;
}
背景图片大小
给图片设置大小
background-size: 高 宽
等比例缩放到完全覆盖容器,背景图像可能超出容器
background-size: cover;
完全包含图片,一段完全曾开，另一端等比例缩放
background-size:contain;
真实大小
background-size: auto;
保证图片拉伸后，视觉中心在最中间
background-position: center center;
线性渐变
第一种写法
background:linear-gradient(60deg,red,yellow,green);
background:linear-gradient(角度数,颜色1,颜色2,颜色3........);
第二种写法
background:linear-gradient(to left bottom,red,yellow,green);
background:linear-gradient(to 水平方向 垂直方向,颜色1,颜色2,颜色3........);
圆形渐变
#box1{
background:radial-gradient(pink,purple);
}
#box2{
height: 150px;
background:radial-gradient(pink,purple);
}
#box3{
/*多个颜色*/
background:radial-gradient(pink,purple,yellow,red,green,blue,black);
}
#box4{
/*可控制大小(渐变)*/
background: radial-gradient(50px,pink,black);
}
#box5{
/*可以控制方向*/
background:radial-gradient(at right,pink,purple);
}
#box6{
background: repeating-radial-gradient(50px,green,pink);
}
