px、em 這樣的長度單位大家肯定都很熟悉,前者為絕對單位,后者為相對單位。CSS3 又引入了新單位:vw、vh、vmin、vmax。下面對它們做個詳細介紹。
(1)vw、vh、vmin、vmax 是一種視窗單位,也是相對單位。它相對的不是父節點或者頁面的根節點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似于 1%。
視窗(Viewport)是你的瀏覽器實際顯示內容的區域—,換句話說是你的不包括工具欄和按鈕的網頁瀏覽器。
(2)具體描述如下:
(1)% 是相對于父元素的大小設定的比率,vw、vh 是視窗大小決定的。
(2)vw、vh 優勢在于能夠直接獲取高度,而用 % 在沒有設置 body 高度的情況下,是無法正確獲得可視區域的高度的,所以這是挺不錯的優勢。
做移動頁面開發時,如果使用 vw、wh 設置字體大小(比如 5vw),在豎屏和橫屏狀態下顯示的字體大小是不一樣的。
由于 vmin 和 vmax 是當前較小的 vw 和 vh 和當前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
(1)桌面 PC
(2)移動設備
視窗(Viewport)單位除了可以用來設置元素的寬高尺寸,也可以在文本中使用。下面使用 vw 設置字體大小來實現響應式文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, h1, h2, h3 {
margin: 0;
padding: 0;
border: 0;
}
.demo {
width: 100vw;//重點看
font-size: 5vw;//重點看
margin: 0 auto;
background-color: #50688B;
color: #FFF;
}
.demo2 {
width: 80vw;//重點看
font-size: 5vw;//重點看
margin: 0 auto;
background-color: #ff6a00;
}
.demo3 {
width: 50vw;//重點看
height: 50vh;//重點看
font-size: 1vw;//重點看
margin: 0 auto;
background-color: #ff006e;
color: #FFF;
}
</style>
</head>
<body>
<div class="demo">
<h1>寬度100%, 字體5%</h1>
</div>
<div class="demo2">
<h2>寬度80%, 字體5%</h2>
</div>
<div class="demo3">
<h3>寬度50%, 高度50%, 字體1%</h3>
</div>
</body>
</html>
有時為了突出彈出框,或者避免頁面元素被點擊。我們需要一個覆蓋整個可視區域的半透明遮罩,這個使用 vw、vh 就可以很輕易地實現。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
background: #28B995;
}
#mask {
width: 100vw;//重點代碼
height: 100vh;//重點代碼
position: fixed;//重點代碼
top: 0;//重點代碼
left: 0;//重點代碼
background: #000000;
opacity: 0.5;
display: none;
}
</style>
</head>
<body>
<button onclick="document.getElementById('mask').style.display='inline'">點擊顯示遮罩</button>
<div id="mask" onclick="document.getElementById('mask').style.display='none'"/></div>
</body>
</html>
(1)樣例效果圖
(2)樣例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。彈出框添加到遮罩層中并居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
background: #28B995;
}
//重點代碼
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}//重點代碼
//重點代碼
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}//重點代碼
//重點代碼
.dialog-box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}//重點代碼
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中彈出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>
(1)樣例效果圖
(2)樣例代碼
遮罩層使用 vw、vh 實現全屏覆蓋。而彈出框的尺寸位置同樣使用 vw、vh 設置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
background: #28B995;
}
//重點代碼
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
//重點代碼
.dialog-box {
top:10vh;
left:10vw;
width: 80vw;
height: 80vh;
text-align: left;
position: absolute;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
}
.dialog-title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog-close {
position: absolute;
top: 5px;
right: 5px;
font-size: 12px;
}
.dialog-body {
background-color: #fff;
flex:1;
overflow: auto;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">點擊顯示彈出框</button>
<div id="dialogContainer" class="dialog-container">
<div class="dialog-box">
<div class="dialog-title">居中彈出框</div>
<a onclick="$('#dialogContainer').hide();" class="dialog-close">關閉</a>
<div class="dialog-body">
<img src="logo.png" class="demo-image" />
</div>
</div>
</div>
</body>
</html>
我們還可以通過視圖單位來限制一些元素的最大寬度或高度,避尺寸過大而超出屏幕。
(1)點擊按鈕,在屏幕中央顯示原始圖片的大圖。
(2)如果圖片原始寬高均不超過屏幕寬高的 90%,則顯示圖片的默認大小。
(3)如果圖片原始寬高均超過屏幕寬高的 90%,則限制為屏幕的 90%,使其能夠完全顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
button {
width: 120px;
height: 30px;
color: #FFFFFF;
font-family: "微軟雅黑";
font-size: 14px;
background: #28B995;
}
.dialog-container {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog-container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog-box {
display: inline-block;
text-align: left;
vertical-align: middle;
position: relative;
}
.demo-image {//重點代碼
max-width: 90vw;
max-height: 90vh;
}
</style>
</head>
<body>
<button onclick="$('#dialogContainer').show();">點擊顯示大圖</button>
<div id="dialogContainer" class="dialog-container" onclick="$('#dialogContainer').hide();">
<div class="dialog-box">
<img src="image.jpg" class="demo-image" />
</div>
</div>
</body>
</html>
(1)使用 vh 單位,我們可把 web 頁面做得像 Office 文檔那樣,一屏正好一頁。改變瀏覽器窗口尺寸,每頁的大小也會隨之變化。
(2)拖動滾動條,我們可以一直往下看到最后一頁。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hangge.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
html, body, div, span, button {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #789BC9;
}
page {
display: block;
height: 98vh;
width: 69.3vh;
margin: 1vh auto;
padding: 12vh;
border: 1px solid #646464;
box-shadow: 0 0 15px rgba(0,0,0,.75);
box-sizing: border-box;
background-color: white;
position: relative;
}
page:after {
content: attr(data-page);
color: graytext;
font-size: 12px;
text-align: center;
bottom: 4vh;
position: absolute;
left: 10vh;
right: 10vh;
}
a {
color: #34538b;
font-size: 14px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var lenPage = $("page").length;
//自動添加每頁底部的頁碼
$("page").each(function(i){
$(this).attr("data-page", "第 "+ (i+1) +" 頁,共 "+ lenPage +" 頁");
});
});
</script>
</head>
<body>
<page><a href="http://hangge.com">歡迎訪問 hangge.com</a></page>
<page></page>
<page></page>
</body>
</html>
原文出自:www.hangge.com 轉載請保留原文鏈接:https://www.hangge.com/blog/cache/detail_1715.html
果圖:
隨著Web技術的不斷演進,CSS3以其強大的視覺表現力,賦予網頁設計無限可能。本文將深入剖析CSS3中的三大視覺魔法工具——漸變、陰影與遮罩技術,通過詳盡的理論講解和豐富的實例演示,助您掌握這些技巧,打造出令人眼前一亮的網頁視覺盛宴。
1. 線性漸變:平滑過渡,簡約而不簡單
css
background: linear-gradient(to right, #ff6b6b, #ff9595);
上述代碼創建了一個從左至右,由#ff6b6b漸變到#ff9595的線性漸變背景。您可以調整方向(如`to bottom`、`45deg`等)、添加更多顏色停止點來豐富漸變效果。
2. 徑向漸變:聚焦視覺中心,營造立體感
css
background: radial-gradient(circle at center, #f7f7f7, #dcdcdc);
此例中,我們創建了一個以元素中心為圓心,從#f7f7f7漸變到#dcdcdc的圓形徑向漸變背景。通過調整形狀(如`ellipse`)、大小(如`closest-side`)和位置(如`top left`),可以靈活定制徑向漸變樣式。
1. 盒子陰影(Box Shadow):輕松實現三維效果
css
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
上述代碼為元素添加了一個向右下偏移2px、模糊半徑為8px、顏色為rgba(0, 0, 0, 0.3)的陰影。理解盒陰影的基本參數(水平偏移、垂直偏移、模糊半徑、擴散半徑、顏色)并靈活運用,即可創造出豐富的陰影效果。
2. 文本陰影(Text Shadow):讓文字躍然紙上
css
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.?), -1px -1px 2px rgba(255, 255, 255, 0.5);
此處為文本設置了兩個陰影:一個向右下偏移、顏色較深的陰影,以及一個向左上偏移、顏色較淺的陰影,形成微妙的浮雕效果。通過疊加多個陰影、調整參數,您可以創作出各種獨特的文本樣式。
1. CSS Mask:精細裁剪,展現獨特視界
css
mask-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
該代碼為元素應用了一個從左至右的線性漸變遮罩,使得元素左側和右側各有一半區域透明。您還可以使用`mask-mode`、`mask-repeat`、`mask-position`等屬性進一步調整遮罩行為。
2. CSS Clip Path:創意裁剪,打破常規布局
css
clip-path: polygon(0 0, 100% 0, .png);
上述代碼使用多邊形裁剪路徑,將元素頂部裁剪成尖角形狀。您還可以使用橢圓、圓形、內切/外切矩形等多種路徑類型,甚至借助SVG路徑實現更為復雜的裁剪效果。
案例一:動態漸變按鈕
css
/* 定義CSS變量 */
:root {
--start-color: #ff6b6b;
--end-color: #ff9595;
}
.button {
background: linear-gradient(to right, var(--start-color), var(--end-color));
transition: background 0.3s ease-in-out;
}
.button:hover,
.button:focus {
--start-color: #ff9595;
--end-color: #ff6b6b;
}
利用CSS變量、偽類和動畫,創建一個點擊時背景漸變顏色動態變化的按鈕:
案例二:懸浮卡片與陰影交互
css
.card {
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.card:hover {
box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.5);
}
結合盒子陰影與:hover偽類,實現鼠標懸停時卡片陰影增強的交互效果:
案例三:遮罩疊加文字特效
css
.image-overlay {
background-image: url('image.jpg'), linear-gradient(to bottom, transparent, black);
background-blend-mode: multiply;
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
利用遮罩與多重背景,創造出文字在圖片上淡入淡出的特效:
結語
CSS3的漸變、陰影與遮罩技術,如同網頁設計的調色板、光影魔術師和剪刀手,賦予網頁視覺表現無盡的可能性。通過深入理解并熟練運用這些技術,您將能打造出既美觀又富有創意的網頁界面,為用戶帶來極致的視覺體驗。持續探索、實踐與創新,您的每一個作品都將成為Web世界中的一道獨特風景。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。