CSS3與頁面佈局學習筆記（六）——CSS3新特性（陰影、動畫、漸變、變形、偽元素等）

来源:http://www.cnblogs.com/SeeYouBug/archive/2016/12/10/6154869.html
-Advertisement-
Play Games

一、陰影 1.1、文字陰影 text-shadow<length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值 <length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值 <length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值 <color> ...


一、陰影

1.1、文字陰影

text-shadow
<length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值
<length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<color>： 設置對象的陰影的顏色。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text{
                font: bold 100px/1.5 georgia, sans-serif;
                color: dodgerblue;
                text-shadow: 10px 10px 50px #000;
                /*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
            }
        </style>
    </head>
    <body>
        <div class="text">
            Shadow Text
        </div>
    </body>
</html>

運行效果：

 

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            body {
                background: #000;
                color: #fff;
            }
            .neon{
                font: bold 100px/1.5 georgia, sans-serif;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
            }
        </style>
        <div class="neon">
            Hello NEON Text
        </div>
    </body>
</html>

 

運行結果：

1.2、盒子陰影

box-shadow
<length>①： 第1個長度值用來設置對象的陰影水平偏移值。可以為負值
<length>②： 第2個長度值用來設置對象的陰影垂直偏移值。可以為負值
<length>③： 如果提供了第3個長度值則用來設置對象的陰影模糊值。不允許負值
<length>④： 如果提供了第4個長度值則用來設置對象的陰影外延值。可以為負值
<color>： 設置對象的陰影的顏色。
inset： 設置對象的陰影類型為內陰影。該值為空時，則對象的陰影類型為外陰影

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow1{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
            }
            .shadow2{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 0 0 30px 0 #1E90FF;
            }
        </style>
    </head>
    <body>
        <p>
        <img src="img/7.jpg" class="shadow2"/>
        </p>
    </body>
</html>

運行效果：

練習：

二、背景

2.1、背景圖像尺寸

background-size：指定對象的背景圖像的尺寸大小

background-size：<bg-size> [ , <bg-size> ]* 

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>： 用長度值指定背景圖像大小。不允許負值。
<percentage>： 用百分比指定背景圖像大小。不允許負值。
auto： 背景圖像的真實大小。
cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 500px;
                height: 300px;
                border: 10px solid rgba(0,0,255,.3);
                margin: 100px;
                
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                /*background-size:100px 50px;*/
                /*background-size:contain;*/
            }
        </style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

運行結果：

2.2、背景圖像顯示的原點

background-origin：指定對象的背景圖像顯示的原點。

background-origin：<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box： 從padding區域（含padding）開始顯示背景圖像。
border-box： 從border區域（含border）開始顯示背景圖像。
content-box： 從content區域開始顯示背景圖像。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 400px;
                height: 200px;
                border: 20px solid rgba(0,0,255,.2);
                margin: 100px;
                padding: 20px;
                
                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                background-origin:padding-box;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

 border-box效果：

 content-box效果：

padding-box效果：（預設）

三、偽元素

偽元素不是真的元素是通過CSS虛擬出的一個元素，CSS3的語法為了區分偽元素與偽類，使用“：：”表示，但是前期為了相容“：”仍然可以使用。

3.1、before

在應用樣式的元素內的前部虛擬一個元素可以指定元素的內容與樣式。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                margin: 100px;
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }
            
            #div1:before {
                content: '這是before偽元素的內容';
                display: block;
                color: white;
                background: lightgreen;
            }
            
            #link1:before {
                content: attr(href);
            }
            
            #link2:before {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客園</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">張果 - 博客園</a>
        </p>
    </body>

</html>

效果：

在上面的示例中偽元素可以當成一個正常的元素寫所有樣式，attr可以取出元素的屬性，img可以指定圖片。

3.2、after

after也是一個與before類似的偽元素，不同的是他的位置是在內部的尾部，示例如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }
            
            #div1:after {
                content: '這是before偽元素的內容';
                display: block;
                color: white;
                background: lightgreen;
            }
            
            #link1:after {
                content: attr(href);
            }
            
            #link2:after {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客園</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">張果 - 博客園</a>
        </p>
    </body>

</html>
View Code

運行效果：

 註意：

a)、本質上並不支持偽元素的雙冒號(::)寫法，而是忽略掉了其中的一個冒號，仍以單冒號來解析，所以等同變相支持了E::after。
b)、不支持設置屬性position, float, list-style-*和一些display值，Firefox3.5開始取消這些限制。
c)、IE10在使用偽元素動畫有一個問題：
.test:hover {}
.test:hover::after { /* 這時animation和transition才生效 */ }需要使用一個空的:hover來激活

3.3、清除浮動

方法一：

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

方法二：

            .clearfix {
                *zoom: 1;
                /*在舊版本的IE瀏覽器縮放大小，觸發haslayout（類似BFC）*/
            }
            
            .clearfix:after {
                /*偽元素，在應用該元素後添加一個偽元素*/
                content: "";
                /*內容為空*/
                display: table;
                /*BFC，清除內部浮動*/
                clear: both;
                /*清除外部浮動*/
            }

四、圓角與邊框

圓角可能是我們最迫切需要的CSS3樣式了，在CSS2.1中想盡各種辦法都不算理想，實現方法如下：

4.1、border-radius 圓角

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>： 用長度值設置對象的圓角半徑長度。不允許負值
<percentage>： 用百分比設置對象的圓角半徑長度。不允許負值

這裡有兩部分，第一個角度是水平角度，第二個角度是垂直角度。

a)、提供2個參數，2個參數以“/”分隔，每個參數允許設置1~4個參數值，第1個參數表示水平半徑，第2個參數表示垂直半徑，如第2個參數省略，則預設等於第1個參數
b)、水平半徑：如果提供全部四個參數值，將按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的順序作用於四個角。
c)、如果只提供一個參數，將用於全部的於四個角。
d)、如果提供兩個，第一個用於上左(top-left)、下右(bottom-right)，第二個用於上右(top-right)、下左(bottom-left)。
e)、如果提供三個，第一個用於上左(top-left)，第二個用於上右(top-right)、下左(bottom-left)，第三個用於下右(bottom-right)。
垂直半徑也遵循以上4點。 對應的腳本特性為borderRadius。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                margin: 100px;
                padding: 10px;
                border: 5px solid lightgreen;
                
                /*border-radius: 20px;  4個角水平與垂直都為10px*/
                
                 /*border-radius: 30px 0 30px 0;  上右下左4個角*/
                
                /*border-radius: 190px; 4個角圓角是高寬一半*/
                
                border-radius: 165px 105px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        border-radius: 165px 105px;
        </div>
    </body>
</html>

效果：

4.2、邊框圖片border-image

border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>： 設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑。
<' border-image-slice '>： 設置或檢索對象的邊框背景圖的分割方式。
<' border-image-width '>： 設置或檢索對象的邊框厚度。
<' border-image-outset '>： 設置或檢索對象的邊框背景圖的擴展。
<' border-image-repeat '>： 設置或檢索對象的邊框圖像的平鋪方式。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 167px;
                margin: 100px;
                padding: 10px;
                border: 27px solid lightgreen;
                
                border-image: url(img/border.png);
                border-image-slice: 27;
            }
        </style>
    </head>
    <body>
        <div id="div1">
                border-image: url(img/border.png);<br/>
                border-image-slice: 27;<br />
        </div>
        
    </body>
</html>

效果：

五、變形 transform

CSS3中使用transform對元素進行變形，可以是2D的也可以是3D（效果）的，transform的參數有許多，多數是函數的形式，具體如下：

transform：none | <transform-function>+

2D Transform Functions：
matrix()： 以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當於直接應用一個[a,b,c,d,e,f]變換矩陣
translate()： 指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
translatex()： 指定對象X軸（水平方向）的平移
translatey()： 指定對象Y軸（垂直方向）的平移
rotate()： 指定對象的2D rotation（2D旋轉），需先有 <' transform-origin '> 屬性的定義
scale()： 指定對象的2D scale（2D縮放）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設取第一個參數的值
scalex()： 指定對象X軸的（水平方向）縮放
scaley()： 指定對象Y軸的（垂直方向）縮放
skew()： 指定對象skew transformation（斜切扭曲）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0
skewx()： 指定對象X軸的（水平方向）扭曲
skewy()： 指定對象Y軸的（垂直方向）扭曲 3D Transform Functions：
matrix3d()： 以一個4x4矩陣的形式指定一個3D變換
translate3d()： 指定對象的3D位移。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
translatez()： 指定對象Z軸的平移
rotate3d()： 指定對象的3D旋轉角度，其中前3個參數分別表示旋轉的方向x,y,z，第4個參數表示旋轉的角度，參數不允許省略
rotatex()： 指定對象在x軸上的旋轉角度
rotatey()： 指定對象在y軸上的旋轉角度
rotatez()： 指定對象在z軸上的旋轉角度
scale3d()： 指定對象的3D縮放。第1個參數對應X軸，第2個參數對應Y軸，第3個參數對應Z軸，參數不允許省略
scalez()： 指定對象的z軸縮放
perspective()： 指定透視距離

5.1、rotate()2D旋轉

transform:rotate(<angle>)

angle是角度的意思，單位可以是：

deg  度（Degrees）
grad 梯度（Gradians）
rad   弧度（Radians）
turn  轉、圈（Turns）

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px;
            }
            
            .box {
                width: 200px
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 文件的複製和剪切功能，簡單實現
    ...
  • 關於mysql下hibernate實體類欄位與資料庫關鍵字衝突的問題
    好久沒寫了，都忘記博客了，趁著現在還在公司，寫的東西是經過驗證的，不是在家憑記憶力寫的，正確率有保障，就說說最近遇到的一件事情吧。 以前一直用的oracle資料庫，這次項目我負責的模塊所在的系統是用的mysql資料庫，結果當初建表時候，欄位什麼的全靠百度，實在是英語不行，然後有個欄位叫usage，是 ...
  • windows socket擴展函數
    1、AcceptEx() AcceptEx()用於非同步接收連接，可以取得客戶程式發送的第一塊數據。 [cpp] view plaincopy BOOL AcceptEx( _In_ SOCKET sListenSocket, //監聽套接字句柄 _In_ SOCKET sAcceptSocket, ...
  • jquery+ajax+struts2
    AJAX 是與伺服器交換數據的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。編寫常規的 AJAX 代碼並不容易，因為不同的瀏覽器對 AJAX 的實現並不相同。這意味著您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 ...
  • java面向對象中的關鍵字
    1,super關鍵字 super:父類的意思 1. super.屬性名 (調用父類的屬性) 2. super.方法名 (調用父類的方法) 3. super([參數列表])(調用父類的構造方法) 註意:a. super關鍵字使用在子類中 b. 子類繼承了父類,則父類中的公有的屬性,方法,就是子類的屬性 ...
  • DDD 領域驅動設計-商品建模之路
    最近在做電商業務中，有關商品業務改版的一些東西，後端的架構設計採用現在很流行的微服務，有關微服務的簡單概念： 微服務是一種架構風格，一個大型複雜軟體應用由一個或多個微服務組成。系統中的各個微服務可被獨立部署，各個微服務之間是松耦合的。每個微服務僅關註於完成一件任務並很好地完成該任務。在所有情況下，每 ...
  • MVC還是MVVM？或許VMVC更適合WinForm客戶端
    最近開始重構一個稍嫌古老的C/S項目，原先採用的技術棧是『WinForm』+『WCF』+『EF』。相對於現在鋪天蓋地的B/S架構來說，看上去似乎和Win95一樣古老，很多新入行的，可能就沒有見過經典的C/S架構的系統。事實上，作為企業信息管理系統，包括ERP/CRM/SCM等，桌面客戶端還是很OK的 ...
  • 記憶體泄露與垃圾回收機制
    記憶體泄露與垃圾回收機制。 1）、記憶體泄露 由於堆中的對象（數據）創建過多， 導致堆中無法存儲，於是出現了記憶體泄露現象。 此現象非常可怕，後果非常嚴重。需杜絕。 記憶體中存儲的數據為臨時數據，臨時數據使用之後， 要及時清理，使用之後的數據，就變成了“垃圾數據”， Java有對獨立運行的線程，可以實現不定 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類