CSS3：垂直居中&圓角矩形
阿新 • • 發佈：2019-02-14
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>
執行效果：
滑鼠移動到上面後（按鈕會有一個塌陷的效果）：
