文字陰影
text-shadow: 5px 5px 5px #000;
text-shadow: 水平位置 垂直位置 陰影半徑 顏色
可設(shè)置多層陰影
text-shadow: 5px 5px 5px #000, text-shadow: 15px 15px 15px #fff;
盒子陰影
box-shadow: 5px 5px 5px #000;
box-shadow: 水平位置 垂直位置 陰影半徑 顏色
可設(shè)置多層陰影
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;
}
背景圖片大小
給圖片設(shè)置大小
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(角度數(shù),顏色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);
}
