CSS3學習筆記----Day01

CSS3邊框

新的CSS3邊框屬性
CSS3 圓角邊框
CSS3 盒陰影

只有h-shadow和v-shadow 屬性：
增加一個color屬性：
增加一個blur屬性：
增加一個spread屬性：
inset屬性：

CSS3 邊框圖片

新的CSS3邊框屬性

屬性	作用
border-image	*設置所有 border-image-- 屬性的簡寫屬性**
border-radius	*設置所有四個 border--radius 屬性的簡寫屬性**
box-shadow	向方框添加一個或多個陰影

CSS3 圓角邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3邊框</title>
    <style>
        #test{
            width: 200px;
            height: 100px;
            border-radius: 15px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div id="test">CSS3圓角</div>
</body>
</html>

在這里插入圖片描述

單獨設置各個圓角 >

屬性	作用
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角
border-top-left-radius	左上角
border-top-right-radius	右上角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3邊框</title>
    <style>
        #test{
            width: 200px;
            height: 100px;
            border-radius: 15px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
            float: left;
        }
        #b1{
            width: 200px;
            height: 100px;
            border-top-left-radius: 15px;

            background-color: #e63946;
            text-align: center;
            line-height: 100px;
            float: left;
        }
        #b2{
            width: 200px;
            height: 100px;
            border-top-right-radius: 15px;

            background-color: #fca311;
            text-align: center;
            line-height: 100px;
            float: left;
        }
        #b3{
            width: 200px;
            height: 100px;
            border-bottom-left-radius: 15px;

            background-color: #6930c3;
            text-align: center;
            line-height: 100px;
            float: left;
        }
        #b4{
            width: 200px;
            height: 100px;
            border-bottom-right-radius: 15px;

            background-color: #4361ee;
            text-align: center;
            line-height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div id="test">CSS3圓角</div>
<br>
<div id="b1"></div>
<br>
<div id="b2"></div>
<br>
<div id="b3"></div>
<br>
<div id="b4"></div>
</body>
</html>

在這里插入圖片描述
上下錯位顯示是br標簽，不然擠在一行上看不清楚

CSS3 盒陰影

語法： box-shadow: h-shadow v-shadow blur spread color inset;

屬性	解釋
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。在CSS顏色值尋找顏色值的完整列表
inset	可選。從外層的陰影（開始時）改變陰影內側陰影

只有h-shadow和v-shadow 屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3邊框陰影</title>
    <style>
        #test{
            width: 270px;
            height: 100px;
            box-shadow:10px 20px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div id="test">只有h-shadow和v-shadow 屬性</div>
</body>
</html>

在這里插入圖片描述

增加一個color屬性：

<style>
        #test{
            width: 200px;
            height: 100px;
            box-shadow: #4361ee 10px 20px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }
    </style>

在這里插入圖片描述

增加一個blur屬性：

    <style>
        #test{
            width: 200px;
            height: 100px;
            box-shadow: #4361ee 10px 20px 10px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }
    </style>

在這里插入圖片描述

增加一個spread屬性：

    <style>
        #test{
            width: 200px;
            height: 100px;
            box-shadow: #4361ee 10px 20px 10px 30px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }   
    </style>

在這里插入圖片描述

inset屬性：

inset屬性是內陰影，在陰影的效果前，加上inset即可轉變成內陰影

    <style>
        #test{
            width: 200px;
            height: 100px;
            box-shadow:inset #4361ee 10px 20px 10px 30px;

            background-color: orangered;
            text-align: center;
            line-height: 100px;
        }
    </style>

在這里插入圖片描述

?? 不太好看，改一下參數

    <style>
        #test{
            width: 200px;
            height: 100px;
            box-shadow:inset orangered 10px 10px 20px;

            background-color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>

在這里插入圖片描述

CSS3 邊框圖片

?? 通過 CSS3 的 border-image 屬性，您可以使用圖片來創建邊框

本文鏈接：https://blog.csdn.net/jsupoker/article/details/108488651

智能推薦

Python學習筆記day01

變量、運算符、數據類型、位預算目錄變量、運算符、數據類型、位預算 1.注釋 2.運算符 2.1算術運算符 2.2比較運算符 2.3邏輯運算符 2.4位運算符 2.5三元運算符 2.6成員運算符 2.7身份運算符 2.8優先級 3. 變量和賦值 3.1變量 3.2賦值 4. 數據類型與轉換 4.1數據類型 4.2類型轉換 5. print() 函數 6.位運算 6.1基本知識 6.2...

Qt學習筆記day01

Qt框架第一個Qt程序，HelloQt 運行結果：這里創建的是一個空項目，不是一個應用程序，也就是說代碼完全是自己手寫的信號和槽運行結果：注意：我們把所有操作都放在構造函數中實現，所有部件都聲明為類的私有成員，在構造函數中對部件進行實例化和相應的操作。設定父對象有兩種方式，一種是setParent,另一種是構造函數傳參。如果要實現多個窗口，要將子窗口的頭文件包含到付窗口的頭文件，在父類中...

python學習筆記_day01

1.基礎語法中文編碼 Python中默認的編碼格式是 ASCII 格式，在沒修改編碼格式時無法正確打印漢字，所以在讀取中文時會報錯。以上程序執行輸出結果為：解決方法只要在文件開頭加入 # -- coding: UTF-8 -- 或者 # coding=utf-8 就行了注意：Python3.X 源碼文件默認使用utf-8編碼，所以可以正常解析中文，無需指定 UTF-8 編碼。注意：如果你...

QT學習筆記（day01）

QT中的對象樹一定程度上簡化了內存回收機制：當創建的對象指定的父親是由QObject或者Object派生的類時候，這個對象被加載到對象樹上，當窗口關閉掉時候，樹上的對象也都會被釋放掉信號和槽通過使用connect()方法，將信號與槽函數綁定。 connect()方法參數說明： ? connect(信號發送方，發送的信號，信號接收方，處理的槽函數) 自定義信號和槽函數自定義信號寫在 sig...

先來學習了解一下幾個類： QApplication類主要功能： 1.負責GUI應用程序的控制流和主要設置 2.對于一個應用程序來說，建立此類的對象是必不可少的 3.在main()函數中創建的第一個對象，其他可執行對象必須在其之后創建 4.包含主事件循環體，負責處理和調度所有來自窗口系統和其他資源事件。 QWidget類所有用戶接口對象的基類，繼承了QObject類的屬性。組件是用戶界面的單元組...