国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<ruby id="o3c7z"><form id="o3c7z"></form></ruby>

<ruby id="o3c7z"><optgroup id="o3c7z"></optgroup></ruby><center id="o3c7z"></center>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新

2年前作者：啦啦右一分類：Toy博客閱讀(29)違法舉報

這篇具有很好參考價值的文章主要介紹了前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

學(xué)習(xí)來源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開發(fā)html5+css3視頻

系列筆記：

【HTML4】（一）前端簡介

【HTML4】（二）各種各樣的常用標(biāo)簽

【HTML4】（三）表單及HTML4收尾

【CSS2】（四）CSS基礎(chǔ)及CSS選擇器

【CSS2】（五）CSS三大特性及常用屬性

【CSS2】（六）CSS盒子模型

【CSS2】（七）浮動

【CSS2】（八）定位與布局

【實操】（九）尚品匯實操練習(xí)

【HTML5】（十）HTML5簡介及相關(guān)新增屬性

【CSS3】（十一）CSS3簡介及基本語法（上）| 相關(guān)新增屬性

【CSS3】（十二）CSS3簡介及基本語法（中）| 變換、過渡與動畫

【CSS3】（十三）CSS3簡介及基本語法（下）| 伸縮盒模型

??前文回顧：前端 | （十二）CSS3簡介及基本語法（中）| 變換、過渡與動畫 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
??前文對應(yīng)p178-p183，本文對應(yīng)p183-p200
??補充網(wǎng)站：W3school，MDN

??伸縮盒模型

??伸縮盒模型簡介

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??伸縮容器、伸縮項目

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

主軸：伸縮項目沿著主軸排列，主軸默認(rèn)是水平的，默認(rèn)方向是：從左到右（左邊是起點，右邊是終點）。
側(cè)軸：與主軸垂直的就是側(cè)軸，側(cè)軸默認(rèn)是垂直的，默認(rèn)方向是：從上到下（上邊是起點，下邊是終點）。

??主軸方向

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??主軸換行方式

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??flex-flow

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??主軸對齊方式

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??側(cè)軸對齊方式

一行的情況：
多行的情況：

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??flex實現(xiàn)水平垂直居中

方法一：父容器開啟 flex 布局，隨后使用 justify-content 和 align-items 實現(xiàn)水平垂直居中

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
}

方法二：父容器開啟 flex 布局，隨后子元素 margin: auto

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	margin: auto;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素水平垂直居中</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: #888;
            display: flex;

            /* 方案一 */
            /* justify-content: center; */
            /* align-items: center; */
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 方案二 */
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??伸縮性

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

.inner {
    /* 設(shè)置伸縮項目在主軸上的基準(zhǔn)長度，若主軸是橫向的寬失效，若主軸是縱向的高失效 */
    flex-basis: 300px;
}

伸

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伸縮項目_伸</title>
    <style>
        .outer {
            width: 1000px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸縮盒模型相關(guān)屬性-start */

            /* 將該元素變?yōu)榱松炜s容器（開啟了flex布局） */
            display: flex;

            /* 調(diào)整主軸方向，水平從左到右，默認(rèn) */
            flex-direction: row;

            /* 主軸換行方式，換行 */
            flex-wrap: wrap;

            /* 主軸的對齊方式，主軸的起始位置 */
            justify-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            flex-grow: 0;
        }
        /* 瓜分比例：1/6 */
        .inner1 {
            flex-grow: 1;
        }
        /* 1/3 */
        .inner2 {
            flex-grow: 2;
            width: 300px;
        }
        /* 1/2 */
        .inner3 {
            flex-grow: 3;
        }
        
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

縮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伸縮項目_縮</title>
    <style>
        .outer {
            width: 400px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;
            /* 伸縮盒模型相關(guān)屬性-start */
            /* 將該元素變?yōu)榱松炜s容器（開啟了flex布局） */
            display: flex;
            /* 調(diào)整主軸方向，水平從左到右，默認(rèn) */
            flex-direction: row;

            /* 主軸換行方式，換行 */
            /* 想縮就別說這玩意，不然直接就換行處理了 */
            /* flex-wrap: wrap; */

            /* 主軸的對齊方式，主軸的起始位置 */
            justify-content: flex-start;
            /* 側(cè)軸的對齊方式 */
            align-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* border: 1px solid black; */
            /* box-sizing: border-box; */
            flex-grow: 1;
        }
        .inner1 {
            flex-shrink: 1;
        }
        .inner2 {
            flex-shrink: 2;
            width: 300px;
        }
        .inner3 {
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">
     		<!-- 縮的下限就是保證內(nèi)容的呈現(xiàn) -->
            <div style="width: 50px;height:50px;background-color: green;">1</div>
        </div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

帶上邊框，瀏覽器計算的時候會有一些誤差。實際應(yīng)用shrink默認(rèn)就是1，就不寫了。簡化！

??flex復(fù)合屬性

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??項目排序和單獨對齊（了解）

order 屬性定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為 0 。
通過 align-self 屬性，可以單獨調(diào)整某個伸縮項目的對齊方式
默認(rèn)值為 auto ，表示繼承父元素的align-items屬性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>項目排序與單獨對齊</title>
    <style>
        .outer {
            width: 600px;
            height: 900px;
            background-color: #888;
            margin: 0 auto;

            /* 伸縮盒模型相關(guān)屬性-start */
            /* 將該元素變?yōu)榱松炜s容器（開啟了flex布局） */
            display: flex;

            /* 調(diào)整主軸方向，水平從左到右，默認(rèn) */
            flex-direction: row;

            /* 主軸換行方式，換行 */
            /* flex-wrap: wrap; */

            /* 主軸的對齊方式，主軸的起始位置 */
            justify-content: flex-start;

            /* 側(cè)軸的對齊方式 */
            align-content: flex-start;
        }
        .inner {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            box-sizing: border-box;
            /* 可以拉伸 可以壓縮 設(shè)置基準(zhǔn)長度為0，可簡寫為：flex:1 */
            flex: 1 1 0;
        }
        .inner1 {
            order: 3;
        }
        .inner2 {
            order: 2;
        }
        .inner3 {
            order: 1;
        }

        .inner2 {
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
    </div>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>尚硅谷官網(wǎng)</title>
    <style>
        * { 
            font-family: Arial; 
            font-size: 14px; 
            margin: 0; 
            padding: 0; 
            border: none; 
        }
        a { text-decoration: none; }
        ul { list-style: none; }

        html,body {
            width: 100%;
            height: 100%;
        }
        body {
            /* 背景鋪滿 */
            background-image: url('../images/bg.jpg');
            /* 背景圖不重復(fù) */
            background-repeat: no-repeat;
            /* 當(dāng)圖片和背景不適配時的最優(yōu)解 */
            background-size: cover;
        }
        .page-header {
            height: 70px;
            /* 需要設(shè)置透明度 */
            background-color: rgba(0, 0, 0, 0.7);
            /* 設(shè)置伸縮盒子 */
            display: flex;
            /* 主軸兩邊定格 */
            justify-content: space-between;
            /* 側(cè)軸對齊方式 */
            align-items: center;
            padding: 0 20px;
        }
        .header-nav {
            display: flex;
            
        }
        .header-nav li a {
            color: white;
            font-size: 20px;
            border: 1px solid white;
            /* 圓角8px */
            border-radius: 8px;
            padding: 10px;
            margin-right: 20px;
        }
        .header-nav li:last-child a {
            margin-right: 0;
        }
        .page-content {
            display: flex;
            /* calc進行數(shù)值計算 */
            height: calc(100vh - 70px);
        }
        .content-nav {
            width: 1000px;
            height: 300px;
            /* 垂直居中 */
            margin: auto;
            display: flex;
            /* 主軸對齊方式：均分 */
            justify-content: space-evenly;
            /* 側(cè)軸 */
            align-items: center;
        }
        .content-nav .item {
            width: 180px;
            height: 200px;
            background-color: orange;
            display: flex;
            /* 轉(zhuǎn)換主軸 */
            flex-direction: column;
            /* 側(cè)軸 */
            align-items: center;
            /* 主軸均分 */
            justify-content: space-evenly;
            transition: 0.2s linear;
            cursor: pointer;
        }
        .content-nav .item:hover {
            /* 邊框陰影 */
            box-shadow: 0px 0px 20px black;
        }
        .content-nav .item span {
            font-size: 20px;
            color: white;
        }
        .content-nav .item:nth-child(1) {
            background-color:#595CA8;
        }
        .content-nav .item:nth-child(2) {
            background-color:#FF9D2E;
        }
        .content-nav .item:nth-child(3) {
            background-color:#01A6DE;
        }
        .content-nav .item:nth-child(4) {
            background-color:#015E91;
        }
        .content-nav .item:nth-child(5) {
            background-color:#1DC128;
        }
    </style>
</head>
<body>
    <!-- 頭部 -->
    <header class="page-header">
        <a href="#">
            <img src="../images/logo.png" alt="logo">
        </a>
        <ul class="header-nav">
            <li><a href="#">國內(nèi)校區(qū)</a></li>
            <li><a href="#">澳洲校區(qū)</a></li>
            <li><a href="#">英國校區(qū)</a></li>
            <li><a href="#">美國校區(qū)</a></li>
        </ul>
    </header>
    <!-- 內(nèi)容區(qū) -->
    <div class="page-content">
        <div class="content-nav">
            <div class="item">
                <img src="../images/item1.png" alt="">
                <span>我的郵箱</span>
            </div>
            <div class="item">
                <img src="../images/item2.png" alt="">
                <span>云服務(wù)</span>
            </div>
            <div class="item">
                <img src="../images/item3.png" alt="">
                <span>手機課堂</span>
            </div>
            <div class="item">
                <img src="../images/item4.png" alt="">
                <span>微信服務(wù)</span>
            </div>
            <div class="item">
                <img src="../images/item5.png" alt="">
                <span>在線客服</span>
            </div>
        </div>
    </div>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

??相應(yīng)式布局

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_媒體查詢_媒體類型</title>
    <style>
        h1 {
            width: 600px;
            height: 400px;
            line-height: 400px;
            background-image: linear-gradient(30deg,red,yellow,green);
            margin: 0 auto;
            text-align: center;
            font-size: 100px;
            color: white;
            text-shadow: 0 0 10px black;
        }
        /* 只有在打印機或打印預(yù)覽才應(yīng)用的樣式 */
        @media print {
            h1 {
                background: transparent;
            }
        }

        /* 只有在屏幕上才應(yīng)用的樣式 */
        @media screen {
            h1 {
                font-family: "翩翩體-簡";
            }
        }

        /* 一直都應(yīng)用的樣式 */
        @media all {
            h1 {
                color: red;
            }
        }
        
    </style>
</head>
<body>
    <h1>新年快樂</h1>
</body>
</html>

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

打印視圖

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3
完整列表參考

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>媒體查詢_媒體特性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        h1 {
            height: 200px;
            background-color: gray;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
        }

        /* 檢測到視口的寬度為800px時，應(yīng)用如下樣式 */
        @media (width:800px) {
            h1 {
                background-color: green;
            }
        }
        /* 檢測到視口的寬度小于等于700px時，應(yīng)用如下樣式 */
        @media (max-width:700px) {
            h1 {
                background-color: orange;
            }
        }
        /* 檢測到視口的寬度大于等于900px時，應(yīng)用如下樣式 */
        @media (min-width:900px) {
            h1 {
                background-color: deepskyblue;
            }
        }
    </style>
</head>
<body>
    <h1>你好啊</h1>
</body>
</html>

??BFC

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3

更加通俗的理解：

BFC是Block Formatting Context （塊級格式上下文），可以理解成元素的一個“特異功能”。
該 “特異功能”，在默認(rèn)的情況下處于關(guān)閉狀態(tài)；當(dāng)元素滿足了某些條件后，該“特異功能”被激活。
所謂激活“特異功能”，專業(yè)點說就是：該元素創(chuàng)建了 BFC （又稱：開啟了 BFC ）。

元素開啟 BFC 后，其子元素不會再產(chǎn)生 margin 塌陷問題。
元素開啟 BFC 后，自己不會被其他浮動元素所覆蓋。
元素開啟 BFC 后，就算其子元素浮動，元素自身高度也不會塌陷。

前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新,# 核心技術(shù)：CSS+HTML,web開發(fā)——前端,前端,css,css3 文章來源地址http://www.zghlxwxcb.cn/news/detail-603585.html

到了這里，關(guān)于前端 | （十三）CSS3簡介及基本語法（下）| 伸縮盒模型 | 尚硅谷前端html+css零基礎(chǔ)教程2023最新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

【CSS3】CSS3 3D 轉(zhuǎn)換 ① ( CSS3 3D 轉(zhuǎn)換簡介 | 3D 物體與 2D 物體區(qū)別 | 3D 空間坐標(biāo)系 | 常用的 3D 轉(zhuǎn)換屬性 | 3D 位移轉(zhuǎn)換語法 | 代碼示例 )
3D 顯示的物體與平面 2D 顯示的物體有明顯的不同 , 3D 顯示效果有近大遠(yuǎn)小的特點 ; 元素的 2D 的轉(zhuǎn)換效果有平移 , 旋轉(zhuǎn) , 縮放效果 , 同樣有對應(yīng)的 3D 轉(zhuǎn)換效果 ; 2D 平面坐標(biāo)系中 , 只有 x 軸和 y 軸 ; 3D 空間坐標(biāo)系比 2D 平面坐標(biāo)系多了一個 Z 軸 ; x 軸 : 水平向右 ; 左側(cè)是
2024年02月12日
瀏覽(32)
【JAVA】CSS3：3D、過渡、動畫、布局、伸縮盒
透視點位置：觀察者位置在2D位移基礎(chǔ)上，可以讓元素沿z軸移動 cubic-bezier(.17,.67,.83,.67) ? cubic-bezier.com 貝塞爾曲線：?cubic-bezier(.17,.67,.83,.67) ? cubic-bezier.com 效果：鼠標(biāo)懸浮，圖片旋轉(zhuǎn)，字體出現(xiàn)，背景模糊鼠標(biāo)懸浮前： ?鼠標(biāo)懸浮后：幀：一個視頻包含多個畫面，每一個
2024年03月22日
瀏覽(30)
前端學(xué)習(xí)——css盒子模型、css3新特性、偽類、布局0711TODO
樣式還是得具體使用才能理解，不然會忘記也理解不透徹；還有定位，元素溢出，浮動，布局水平垂直對齊： css3新特性 1過渡 2 動畫 3 2D、3D轉(zhuǎn)換偽類三種定位方式彈性布局/柵格布局
2024年02月15日
瀏覽(162)
[HTML]Web前端開發(fā)技術(shù)6（HTML5、CSS3、JavaScript ）DIV與SPAN，盒模型，Overflow——喵喵畫網(wǎng)頁
希望你開心，希望你健康，希望你幸福，希望你點贊！最后的最后，關(guān)注喵，關(guān)注喵，關(guān)注喵，佬佬會看到更多有趣的博客哦！?。?喵喵喵，你對我真的很重要！目錄前言 CSS盒模型簡介 CSS盒模型 CSS盒模型結(jié)構(gòu) 盒模型的屬性邊框border 邊框?qū)挾萣order-width 邊框樣式border-sty
2024年02月04日
瀏覽(28)
CSS3屬性詳解（一）文本盒模型中的 box-ssize 屬性處理兼容性問題：私有前綴邊框背景屬性漸變前端開發(fā)入門筆記（七）
CSS3是用于為HTML文檔添加樣式和布局的最新版本的層疊樣式表（Cascading Style Sheets）。下面是一些常用的CSS3屬性及其詳細(xì)解釋： border-radius：設(shè)置元素的邊框圓角的半徑?？梢允褂盟膫€值設(shè)置四個不同的圓角半徑，也可以只使用一個值來設(shè)置統(tǒng)一的圓角。 box-shadow：創(chuàng)建一個元
2024年02月08日
瀏覽(30)
前端學(xué)習(xí)——CSS3
box-sizing resize box-shadow opacity background-origin background-clip background-size background復(fù)合屬性多背景圖邊框圓角邊框外輪廓文本陰影文本換行文本溢出文本修飾文本描邊線性漸變
2024年02月12日
瀏覽(90)
前端之css3
? ? ? ? 1 新增實用的選擇器，例如動態(tài)偽類，目標(biāo)偽類，偽元素 ? ? ? ? 2 新增更好的視覺效果 ? ? ? ? 3 新增豐富的背景效果 ? ? ? ? 4 新增全新的布局方案 ? ? ? ? 5 新增web字體 ? ? ? ? 6 新增顏色，hsl，hsla，rgba ? ? ? ? 7 新增2D和3D變換 ? ? ? ??8 新增動畫和過渡效
2024年02月13日
瀏覽(23)
Threejs進階之十三：CSS3DRenderer與Tween.js實現(xiàn)粒子小球按規(guī)律變化
今天我們使用CSS3DRenderer+Tween.js實現(xiàn)Threejs官方示例中的粒子小球按規(guī)律變化的效果，先看下最終實現(xiàn)的效果先來分析下，這個頁面的動畫效果是由512個小球組合起來的四種不同變化，分別是曲面、立方體、隨機和圓球四種變化；下面我們來實現(xiàn)下這個效果老套路，要實現(xiàn)上面
2024年02月03日
瀏覽(18)
【前端】CSS3新特性
??css3這個相信大家不陌生了，是個非常有趣，神奇的東西！有了css3，js都可以少寫很多！最近我也在過一遍css3的一些新特性（不是全部，是我在工作上常用的，或者覺得有用的），以及一些實例，就寫了這一篇總結(jié)！希望，這篇文章能幫到大家認(rèn)識css3。 ??寫這篇文章主
2024年02月09日
瀏覽(29)
2023前端面試筆記 —— CSS3
內(nèi)容鏈接 2023前端面試筆記 HTML5 2023前端面試筆記 CSS3 歡迎閱讀本篇前端面試筆記的CSS3篇！CSS3是前端開發(fā)中非常重要的一部分，它為我們提供了豐富的樣式和動畫效果，使得網(wǎng)頁更加美觀和交互性更強。在前端面試中，對CSS3的掌握程度往往是評判候選人技術(shù)水平的重要指標(biāo)
2024年02月11日
瀏覽(24)

<ruby id="ga77a"></ruby>