CSS3其他

文字阴影

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);

}