Css3一些簡單基本屬性集合

css3新增基本常用屬性大全

border-radius: 圓角

border-radius: 一個值/四個值/每個值拆分成兩個方向值

實例eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border-radius</title>
    <style>
        body {
            color: #fff;
            text-align: center;
        }
        .btn {
            width: 50px;
            height: 30px;
            border-radius: 10px;
            line-height: 30px;
            background-color: gold;
        }

        .circle {
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
            line-height: 100px;
        }

        .container {
            width: 200px;
            height: 100px;
            /* 左上角 右上角 右下角 左下角 */
            border-radius: 20px 200px 20px 200px;
            background-color: blue;     
        }

        .box {
            width: 200px;
            height: 200px;
            /* 左上角x值, y值, 右上角x值, y值, 左下角... 右下角... */
            border-top-left-radius: 20px 20px;
            border-top-right-radius: 20px 20px;
            border-bottom-left-radius: 20px 20px;
            border-bottom-right-radius: 20px 20px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <!-- 通過css生成一個按鈕 -->
    <div class="btn">按鈕</div>

    <!-- 通過css生成一個圓 -->
    <div class="circle">圓</div>

    <!-- 拆分成四個值的border-radius -->
    <div class="container">
        異性效果
    </div>

    <!-- 拆分成八個值得border-radius -->
    <div class="box"></div>
</body>
</html>

box-shadow: 盒子陰影

box-shadow: x y 模糊半徑 陰影拓展半徑 陰影顏色 投影方式

x: 數值越大向右的偏移量就越大, 如果爲負數則方向相反

y: 數值越大向下的偏移量就越大, 如果爲負數則方向相反

模糊半徑: 如果爲0則是不模糊, 小於0無效, 大於0數值越大陰影越模糊

陰影拓展半徑: 陰影的大小, 陰影可以跟原dom元素大小不一致, 所以這個值越大陰影越大, 爲0陰影跟dom元素一樣大, 如果小於0則陰影小於原dom元素

陰影顏色: 控制陰影的色值

投影方式: 默認值爲outset, 代表向外投影 可以設置成inset,  向內投影

實例 eg:也是做一個日常開發中我們使用比較多的小卡片效果如圖

<!-- 代碼相對來說比較簡單, 真正控制陰影的也就那一句box-shadow -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>box-shadow</title>
    <style>
        :root, body {
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            color: #999;
            text-align: center;
            font-size: 12px;
        }
        .card {
            margin: 100px auto;
            width: 300px;
            height: 100px;
            line-height: 100px;
            background-color: #fff;
            box-shadow: 1px 3px 6px 2px #ccc;
        }
    
    </style>
</head>
<body>
    <div class="card">我是小卡片兒</div>
</body>
</html>

box-shadow還可以玩出很多花樣, 比如倒影, 比如色值重合產生的光環


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>box-shadow</title>
    <style>
        :root, body {
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            color: #999;
            text-align: center;
            font-size: 12px;
        }
        
        div.drama-wrapper {
            width: 600px;
            height: 400px;
            background-color: #000;
            margin:  150px auto;
            overflow: hidden;
        }
        .drama-circle {
            width: 300px;
            height: 300px;
            margin: 40px auto;    
            box-shadow: 0px 0px 10px 0px #fff,
                        -5px 0px 15px 0px #f0f,
                        5px 0px 15px 0px #0ff,
                        10px 0px 15px 0px #f0f inset,
                        -10px 0px 15px 0px #0ff inset,
                        0px 0px 10px 0px #fff inset,
                        5px 0px 40px 0px #f0f inset,
                        -5px 0px 40px 0px #0ff inset;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="drama-wrapper">
        <div class="drama-circle"></div>
    </div>
</body>
</html>

還有很多陰影特效, box-shadow的可玩性還是很高的

text-shadow: 文本陰影

text-shadow: x y 模糊半徑 陰影顏色

實例: text-shadow其實我們可以來做個鏤空或者浮雕字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>text-shadow</title>
    <style>
        :root, body {
            width: 100%;
            height: 100%;
            background-color: slategrey;
            overflow: hidden;
            font-family: Menlo;
            font-size: 80px;
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        .outer {
            margin: 100px 0;
            text-shadow: -2px 2px #000, -1px 1px #fff;
        }

        .inner {
            margin-top: 100px;
            text-shadow: -1px -1px #000, 1px 1px #fff;
        }
    </style>
</head>
<body>
    <!-- 浮雕 -->
    <div class="outer">
        Relief
    </div>
    <!-- 正常 -->
    <div class="normal">
        Normal
    </div>
    <!-- 鏤空 -->
    <div class="inner">
        Hollowing Out
    </div>
</body>
</html>

其實text-shadow還可以寫很多有趣的特效比如熒光字等

rgba: 帶透明的色值

這哥們就是給你設置帶opacity的色值的, 跟opacity不同的是, opacity是一透明就整個dom元素不管是啥都給爺透明, 而rgba只針對色值進行透明

這麼簡單就不演示了,吃虧

linear-gradient

linear-gradient(線性漸變): 漸變方向, 漸變顏色 百分比,

漸變方向: 

1. 寫方向: to bottom, to right, to bottom right 之類的

2. 寫角度: 0deg, 45deg

這哥們確實牛皮, 直接給你背景色都漸變了, 話不多說直接來看個實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>線性漸變</title>
    <style>
        .linear-dir {
            width: 200px;
            height: 200px;
            /* 寫方向 */
            background-image: linear-gradient(to left, yellow, green);
            /* 可以加上百分比, 顏色的話想寫多少個顏色寫多少個, 用逗號就行 */
            /* background-image: linear-gradient(to top right, yellow 50%, red 80%, green); */
        }

        .linear-deg {
            width: 200px;
            height: 200px;
            /* 寫角度 */
            background-image: linear-gradient(45deg, red, orange); 
            /* 同樣也是可以加上百分比和更多的顏色 */
            /* background-image: linear-gradient(30deg, blue 50%, gray 80%, green); */
        }
    </style>
</head>
<body>
    <!-- 線性漸變 -->
    <div class="linear-dir"></div>
    <div class="linear-deg"></div>
</body>
</html>

效果如圖就實現了一個漸變, 唯一需要注意的是這個漸變他不是background-color, 而是background-image, 莫搞混了

radial-gradient

radial-gradient(徑向漸變): 形狀 (半徑/長短軸) at 中心點, 顏色 百分比

形狀: 

1. 圓: 直接給他第一個參數上個circle

2. 橢圓: 直接給他第一個參數上個ellipse

半徑/長短軸:

1. 半徑: 如果形狀是圓, 那肯定是半徑

2. 長短軸: 如果形狀是橢圓, 筆者眼睛寫長短軸(x, y)

中心點:

1. 可以寫成像素值

2. 可以寫成百分比

3. 還可以整成方向, 就是at top left 這種的

給老鐵整兩個實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>徑向漸變</title>
    <style>
        /* 圓 */
        .circle {
            width: 200px;
            height: 200px;
            /* circle -> 形狀, 半徑100 從50% 也就是中心點開始 */
            background-image: radial-gradient(circle 100px at 50%, transparent 50%, red 80%, transparent);
        }

        /* 橢圓 */
        .ellipse {
            width: 200px;
            height: 200px;
            background-image: radial-gradient(ellipse 50px 100px at center, red 50%, orange 85%, transparent);
        }
    </style>
</head>
<body>
    <div class="circle"></div>
    <div class="ellipse"></div>
</body>
</html>

這個漸變我也不是很熟, 用的少老鐵有空就看官方文檔, 我這個圖個樂呵和眼熟

background-origin, background-clip, background-size

background-origin: 指定繪製背景圖像時的起點, 這個屬性就是控制圖片從哪個地方開始引入, 我們來看一個例子

        <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                <title>background-origin</title>
                <style>
                    .origin {
                        margin: 100px auto;
                        width: 400px;
                        height: 400px;
                        background-image: url('http://img1.imgtn.bdimg.com/it/u=16577088,3159930271&fm=26&gp=0.jpg');
                        padding: 80px;
                        border: 50px solid rgba(255, 255, 255, 0.3);
                    }
                
                </style>

            </head>
            <body>
                <div class="origin"></div>
            </body>
        </html>

在盒模型中, 該.origin元素顯示如下

我們發現該元素的背景圖從padding區域就已經開始渲染了, 而background-origin屬性確實是控制背景圖片從什麼區域開始渲染
他的默認屬性爲padding-box, 將圖片從padding區域開始渲染

border-box

當我們設置background-position:border-box以後, 該圖片開始從border區域引入

  .origin {
    margin: 100px auto;
    width: 400px;
    height: 400px;
    background-image: url('http://img1.imgtn.bdimg.com/it/u=16577088,3159930271&fm=26&gp=0.jpg');
    padding: 80px;
    border: 50px solid rgba(255, 255, 255, 0.3);
    background-origin: border-box;
}

padding-box

當我們設置background-position:padding-box以後, 該圖片開始從padding區域引入, 同時padding-box也是默認值
```
      .origin {
        ...
        background-origin: border-box;
    }
```
1. content-box
  
  當我們設置background-position:content-box以後, 該圖片開始從content區域引入
```
  .origin {
    ...
    background-origin: content-box;
}
```
- background-clip: 指定背景的顯示範圍,
  
  跟background-origin的三個屬性性質差不多, 他的默認值是border-box, 也意味着border以內都要保留(包括border)
  1. border-box
  背景會被保留border(包含border)以內的內容
```
 .origin
   ...
   background-origin: content-box;
   background-clip: border-box
}
```
  1. padding-box
  背景背會保留padding(包含padding)以內的內容
```
.origin {
    ...
    background-clip: padding-box
}
```
  1. content-box
  背景會被保留content(包含content)以內的內容
```
.origin {
    ...
    background-clip: content-box;
}
```
- background-size: 指定背景中圖像的尺寸
  1. auto
    
    默認就是圖片多大就多大, 放得下就放放不下也不會縮放
  2. length
    
    直接用數值設置大小
  3. percentage
    
    設置百分比, 比如100% 100% 就是狂高都是100%
  4. cover
    
    等比改變大小, 圖片會被鋪滿整個容器爲止
  5. contain
    
    設置了contain的話, 那麼圖片會被等比改變大小, 知道容器可以放置進一張圖片爲止
  反正就是一控制大小的, 自己把每個屬性試試就得了

border-image

border-image: 圖片邊框, 這個我真不想寫, 查查api文檔就會了

word-wrap

word-wrap: 超出換行, 瀏覽器默認只會對漢字或全角空格與半角空格進行超出換行, 而連續字符則不會換行, 如果我們想要文字自動換行的話, 就要用到該屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>word-wrap</title>
    <style>
        div {
            width: 100px;
            border: 2px solid salmon;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 漢字也會自動換行 -->
    <div>你好, 我是一名工程師, 很高興認識你</div>
    <!-- 這種帶空格的是會自動換行的 -->
    <div>hello world, i am a engineer</div>
    <!-- 換行他 盤他 -->
    <div>abcdefghijklmnopqrstuvwxyz</div>
</body>
</html>

上方代碼效果如下, 我們可以看到第三個div是沒有進行換行的

如果我們想讓它換行直接css後面整個屬性, word-wrap: break-word,立馬給你換了

div {
    ...
    word-wrap: break-word;
}

text-overflow, white-space

這兩個一個是控制文字溢出怎麼處理, 一個是控制文字到底能不能換行, 因爲就算我們不寫word-wrap: break-word也會有些會默認換行, 所以white-space是來控制所有文字到底換不換, 這兩個一起講的原因呢, 是因爲他們有一個組合使用叫做單行文字超出打點兒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>單行文字溢出打點兒</title>
    <style>
        div {
            width: 200px;
            border: 2px solid salmon;
            margin:  20px auto;
            
        }
    </style>
</head>
<body>
    <div>你好我是一名前端工程師, 很高興認識你</div>
</body>
</html>

上方的代碼其實在瀏覽器中一定會自動換行的, 我們現在只想讓他們不要自動換行, 而是溢出打點怎麼辦呢, 直接三件套操作一步到位

div {
    ...
    /* 不準換行 */
    white-space: nowrap;
    /* 文字溢出寬度給我打點 */
    text-overflow: ellipsis;
    /* 超出寬度直接隱藏 */
    overflow: hidden;
}

我這給你一步到位處理的, 秀兒, 經過上面操作, 文字乖乖溢出打點

哥再教你個勁爆的多行打點, 雖然兼容性不好, 湊合用用唄, 像公司內部系統都用chrome的不就可以省去js的操作啦

多行打點, 效果圖如下

代碼:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>單行文字溢出打點兒</title>
    <style>
        div {
            width: 200px;
            border: 2px solid salmon;
            margin: 20px auto;
            /* 你想第幾行的時候開始打點兒 */
            -webkit-line-clamp: 2; 
            /* 你要用line-clamp 就得給我整這個box佈局, 
            跟flex一樣也是一種佈局形式, 效果跟flex也差不離太多
            只是兼容性差 */
            display: -webkit-box;
            /* 這跟上面那個display: box一起出現的, 你可以理解爲flex-direction: column */
            -webkit-box-orient: vertical;
            /* 這玩意是必須在的 */
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div>你好我是一名前端工程師, 很高興認識你, 我今年18歲, 明年也是18歲</div>
</body>

</html>

@font-face

@font-face: 自定義字體, 這個主要是用來當我們需要在頁面中融入自己的字體, 就可以通過@font-face引入字體,也是類似於封裝

body {
    font-family: '宋體'
}

@font-face {
    font-family: '宋體',
    src: './宋體.ttf'
}

我們經常可以在引入字體圖標的時候看到@font-face

至於像那些盒模型, flex, perspective transform transition之類的筆者認爲寫成單一的博客比較好, 所以今天就到此爲止啦

付金權

發佈了28 篇原創文章 · 獲贊 11 · 訪問量 2046

私信關注

Css3一些簡單基本屬性集合

css3新增基本常用屬性大全

border-radius: 圓角

box-shadow: 盒子陰影

text-shadow: 文本陰影

rgba: 帶透明的色值

linear-gradient

radial-gradient

background-origin, background-clip, background-size

border-image

word-wrap

text-overflow, white-space

@font-face

至於像那些盒模型, flex, perspective transform transition之類的筆者認爲寫成單一的博客比較好, 所以今天就到此爲止啦

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

設計模式專欄 - 行爲型設計模式之策略模式（Strategy Pattern）（表單校驗案例, 策略模式的優缺點）

你不知道的JS專欄 - 函數柯里化(柯里化含義, 作用, 寫法, 大廠面試題)

ES6專欄 - 新的內部方法集合 - Reflect

原生JS專欄 - 原型/原型鏈, 五種繼承模式

# Vue專欄 - 你不知道的組件用法篇(遞歸組件, 動態組件等)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結