1.如果垂直居中vertical-align:middle;不起作用的话,可以考虑让显示的内容以表格的形式显示。代码如下:
#content{ width: 300px; height: 300px; border: #08050a solid 1px; margin: auto; /*居中对齐*/ display: table; } #qingwen{ border: #d6d6ff solid 1px; text-align: center; display: table-cell; vertical-align: middle; }
<div id="content"> <div id="qingwen"> 霁月难逢,<br> 彩云易散,<br> 心比天高,<br> 身为下贱。<br> 风流灵巧招人怨,<br> 寿夭多因毁谤生,<br> 多情公子空牵念。 </div> </div>
运行效果:
2.圆角矩形:
.以前在做圆角矩形的时候是要切图,并拼到一起,现在可以直接用border-radius来设置就可以了。
示例代码:
div{ width: 200px; height: 200px; border: #5f5f5f solid 1px; margin-bottom: 15px; text-align: center; } div:first-of-type{ border-radius: 20px; /*所有角的半径都是20px*/ } div:nth-of-type(2){ border-radius: 20px 40px; /*第一个表示上下,第二个表示左右*/ } div:nth-of-type(3){ border-radius: 20px 40px 60px; /*上 左右 下*/ } div:nth-of-type(4){ border-radius: 10px 0 40px 20px; /*上 右 下 左*/ } div:nth-of-type(5){ border-radius: 0 0 200px; /*扇形*/ } div:nth-of-type(6){ border-radius: 100px; } div:nth-of-type(7){ border-radius: 100%; /*最好用百分比,这样就避免计算带来的错误*/ }
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div>
运行效果:
圆角这种情况很多用在图片上,例如:
img{ border-radius: 50%; }
<img src="dousen.jpg">运行效果:
3.圆角矩形+阴影+过渡+文字阴影:
(注:该案例学习视频来自传智)
box-shadow可以添加一个或者多个阴影(用逗号隔开)
过渡经常和hover结合使用,过渡是写在要改变的物体本身上面。
文本阴影:text-shadow:水平位置 垂直位置 阴影范围 颜色
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴影、文字阴影、圆角矩形、过渡结合练习</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width: 400px; height: 300px; margin:100px auto; background-color: #9AE2FF; /*备用颜色:#89D8FF*/ border-radius: 50%; /*阴影往上投*/ box-shadow: 0 -15px 15px #2aabd2 inset, /*下方的阴影:垂直、向上、内阴影,阴影颜色深于背景色*/ /*左侧的阴影:水平阴影,垂直方向跟下方阴影的坐标保持不变,内阴影,颜色发生变化*/ 10px -15px 15px #36B8D2 inset, /*阴影往右投*/ -10px -15px 15px #fff inset, /*右侧阴影往左投,横坐标变成负值,纵坐标保持不变,因为高光,颜色调为白色*/ 0 15px #2aabd2, /*向下的外阴影,此处没有添加羽化值,则为默认*/ -35px 40px 5px rgba(0,0,0,0.3); /*向左和向下的外阴影,颜色为黑色,透明度0.3,用rgba来表示有透明度的颜色*/ transition:all 0.25s ease-in 0s; /*此处的all代表box-shadow和margin-top*/ text-align: center; line-height: 300px; font-size: 60px; /*color: #88f;*/ } .box:hover{ box-shadow: 0 -15px 15px #2aabd2 inset, 10px -15px 15px #36B8D2 inset, -10px -15px 15px #fff inset, 0 2px #2aabd2, /*下面的外阴影,向下,鼠标摁下会变小*/ -10px 12px 5px rgba(0,0,0,0.3); /*左侧的外阴影,鼠标摁下会变小*/ margin-top:115px; /*通过改变margin(margin下移)来实现一个按钮向下的效果*/ } #txt{ text-shadow: 3px -3px 1px #2aabd2, /*添加文字阴影*/ -3px 3px 1px #fff; /*再给一个反方向的阴影*/ transform: scale(1,0.8); /*y轴压缩一下,让字看起来更立体一些*/ } </style> </head> <body> <div class="box"> <div id="txt">综合案例</div> </div> </body> </html>
运行效果:
鼠标移动到上面后(按钮会有一个塌陷的效果):