從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

阿新 • • 發佈：2019-01-15

一、顏色模式

顏色模式有兩種：

RGBA

rgba(0,0,0,0.5); //黑色，透明度0.5

HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）

紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

HSLA(0, 100%, 50%, 1); // 紅色不透明，飽和度100%，亮度50%

明度預設是50%,一般建議保留50的值，如果加到100後，變成白色，降到0後為黑色。

注意：

1、RGBA和HSLA中的透明度不會影響子元素的透明度，不具繼承性；

2、opacity 會影響子元素的透明度，子元素會繼承父元素的透明度。

3、transparent 不可調節透明度，始終完全透明。

（color: transparent;）

二、文字陰影

語法：

/*陰影可以疊加，使用逗號隔開*/
text-shadow: offsetX offsetY blur color, 
             offsetX1 offsetY1 blur1 color1, ...

offsetX：X方向偏移度

offsetY：Y方向偏移度

blur：陰影的模糊度

color：陰影顏色

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .demo {
            width: 600px;
            padding: 30px;
            background-color: #666;
            margin: 20px auto;
            text-align: center;
            font: bold 80px/100% "微軟雅黑";
            color: #fff;
        }

        /*新增陰影 text-shadow:offsetX offsetY blur color*/
        .demo1 {
            text-shadow: -5px -5px 5px orange;
        }

        .demo2 {
            color: #000;
            text-shadow: 0 1px 0 #fff;
        }
        /*立體浮雕效果*/
        .demo3 {
            text-shadow: -1px -1px 0 red, 
                        -2px -2px 0 orange, 
                        -3px -3px 0 yellow,
                        -4px -4px 0 green, 
                        -5px -5px 0 cyan, 
                        -6px -6px 0 blue, 
                        -7px -7px 0 purple;
        }
        .demo4 {
            text-shadow: 0 0 30px pink;
        }
    </style>
</head>

<body>
    <div class="demo demo1">我是江小白</div>
    <div class="demo demo2">我是江小白</div>
    <div class="demo demo3">我是江小白</div>
    <div class="demo demo4">我是江小白</div>
</body>

</html>

三、盒模型

1、在預設情況下，CSS 設定的盒子寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似。真正盒子的寬度（在頁面呈現出來的寬度）和高度，需要加上一些其它的屬性。例如：

padding + border + width = 盒子的寬度
padding + border + height = 盒子的高度

很明顯，這不直觀，很容易出錯，造成網頁中其它元素的錯位。

2、CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

content-box：物件的實際寬度等於設定的 width 值和 border、padding 之和。（盒子實際的寬度 = 設定的 width + padding + border）
border-box：物件的實際寬度就等於設定的width值，即使定義有 border 和 padding 也不會改變物件的實際寬度。（盒子實際的寬度 = 設定的 width），相應的盒子的內容的寬度或高度區間會變小。

3、瀏覽器的相容性
IE8 及以上版本支援該屬性，Firefox 需要加上瀏覽器廠商字首 -moz-，對於低版本的 IOS 和 Android 瀏覽器也需要加上 -webkit-

四、邊框圓角

使用 border-radius 屬性來設定圓角。

/*新增邊框圓角*/
/*1.設定一個值：四個角的圓角值都一樣*/
border-radius: 10px;
border-radius: 50%;

/*2.設定兩個值:第一個值控制左上/右下，第二個值控制右上/左下*/
border-radius: 10px 30px;

/*3.設定三個值：第一個值控制左上，第二值控制右上/左下，第三個值控制右下*/
border-radius: 10px 40px 60px;

/*4.設定四個值：左上  右上 右下 左下*/
border-radius: 10px 30px 60px 100px;

/*5.新增/是用來設定當前水平和垂直方向的半徑值：水平x方向/垂直y方向*/
border-radius: 100px/50px;

/*6.新增某個角點的圓角*/
border-radius: 0px 50px 0px 0px;
/*或者：border-上下-左右-radius:*/
border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;

/*7.設定某個角點的兩個方向上的不同圓角*/
border-top-right-radius: 100px 50px;  /*設定上偏移100px，右偏移50px樣式的圓角*/
border-bottom-left-radius: 80px 40px; /*設定下偏移80px，左偏移40px樣式的圓角*/
border-bottom-right-radius: 60px 30px;/*設定下偏移60px，右偏移30px樣式的圓角*/
border-top-left-radius: 40px 20px;    /*設定上偏移40px，左偏移20px樣式的圓角*/

/*8.如果想設定四個角點的不同方向上的不同圓角值*/
/*分別是水平方向的偏移：左上，右上，右下，左下 ，垂直方向的偏移：左上，右上，右下，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;

五、邊框陰影

語法：

box-shadow:h v blur spread color inset

h：水平方向的偏移值（必填）
v：垂直方向的偏移值（必填）
blur：模糊度--可選，預設0 （必填）
spread：陰影的尺寸，擴充套件和收縮陰影的大小--可選預設0
color：顏色--可選，預設黑色
inset：內陰影--可選,預設是外陰影

當然，box-shadow 和 text-shadow 一樣，也是可以新增多個的，之間用逗號隔開。

box-shadow: 10px 10px 5px pink, 
           -10px -10px 5px pink; /*spread等不需要，省略不寫*/

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

https 兼容問題 3.1 線性 web前端不同錨點 splay lock 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 CSS3（五）transform

transform transform 字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：移動 translate，縮放scale，旋轉rotate，翻轉skew，改變旋轉軸心等。 1、元素的移動：translate 作用：使用transform實現元素的移動語法： /*使用t

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

從零開始學 Web 之 CSS3（三）漸變，background屬性

一、漸變漸變是CSS3當中比較豐富多彩的一個特性，通過漸變我們可以實現許多炫麗的效果，有效的減少圖片的使用數量，並且具有很強的適應性和可擴充套件性。可分為線性漸變、徑向漸變。 1、線性漸變線性漸變：指沿著某條直線朝一個方向產生漸變效果。語法： background: linear-gradient(

從零開始學 Web 之 CSS3（八）CSS3三個案例

一、CSS3三個案例 1、案例一：攜程網首頁需求：頁面無橫向滾動條，頁面隨著寬度的改變自動伸縮。程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局

一、多列布局 CSS3中新出現的多列布局 (multi-column) 是傳統 HTML 網頁中塊狀佈局模式的有力擴充。這種新語法能夠讓 WEB 開發人員輕鬆的讓文字呈現多列顯示。我們知道，當一行文字太長時，讀者讀起來就比較費勁，有可能讀錯行或讀序列；人們的視點從文字的一端移到另一端、然後換到下一行的

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片邊框圖片：就是給邊框加圖片背景。我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。語法： /* bord

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學Web之HTML（二）標籤、超連結、特殊符號、列表、音樂、滾動、head等

大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、標籤 1、單標籤註釋標籤

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、對樣式的操作

從零開始學 Web 之 Ajax（二）PHP基礎語法

一、PHP 基礎語法 1、基本結構所有PHP程式碼都要寫到 <?php ... ?> 裡面。 PHP檔案可以和 HTML 檔案結合進行使用。 PHP檔案的預設副檔名是 ".php"。 PHP程式碼必須在伺服器上執行。 2、列印語句 echo：的作用在頁面中輸入字串（只能列印字串，數字等

從零開始學 Web 之 ES6（二）ES5的一些擴充套件

一、json物件擴充套件把一個Json物件轉換成字串 JSON.stringify(js物件/陣列); 把一個json格式的字串轉換成Json物件 JSON.parse(json物件/陣列); 示例： <script type="text/javascript"> var o

從零開始學 Web 之 JavaScript（二）變數

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、變數 1、變數

從零開始學 Web 之 BOM（二）定時器

一、定時器 BOM 中有兩中方式設定定時器。 1、方式一特點：定時器可以重複使用。 // 引數有兩個： // 第一個引數：定時器定時結束處理函式 // 第二個引數：定時事件，單位毫秒。 // 返回值：定時器id值 var timeId = window.setInterval(function()

從零開始學 Web 之 CSS（二）文字、標籤、特性

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、文字元素 1、

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式

二、文字陰影

三、盒模型

四、邊框圓角

五、邊框陰影

相關推薦