盒子陰影
box-shadow 盒子陰影
水平方向上陰影偏移量
垂直方向上陰影偏移量
模糊的程度 （正值）
陰影的外延伸 （數值正負皆可）
陰影的顏色 inset
box-shadow
: 0px 0px 10px red inset;
表示顏色的方式
顏色名，英文
rgb（red green blue）(0-255,0-255,0-255)color:rgb(red, green, blue);
16進製制#ff0000
常用的顏色
黑色#000
白色#fff
紅色#f00
深灰#222
灰色#333
淺灰#ccc
背景
url 的路徑 相對路徑絕對路徑都可以
background-image
:url("…/img/bdqb.jpg")
background-repeat背景圖重複的方式
預設就是repeat， 鋪滿整個盒子
no-repeat不會平鋪
repeat-x水平方向上平鋪
repeat-y垂直方向上平鋪
示例：
background-repeat
: no-repeat
屬性值：畫素px，百分比，單詞
格式：background-position: 向右的偏移量 向下的偏移量;
1.畫素 px
可以為負值 正反方向都行。
2.百分比是相對於容器本身而言的
盒子的寬/高-的寬/高*百分比
3.單詞
水平left center right
垂直top bottom center
只寫乙個值的話，第二值預設是center
設定背景是否會隨著網頁滾動而滾動
fixed背景是不會滾動的，是固定的
scroll預設值 會滾動。
復合寫法：
background
:color,image,repeat,attachment,position
背景尺寸
background-size屬性值型別：
1.px
2.百分比
背景寬高相當於盒子的寬高百分比
3.單詞
background-size: contain;自動調整縮放比例，保證完整顯示在背景區域中，但不能保證鋪滿盒子。
background-size: cover;自動調整縮放比例 保證背景區域鋪滿，但不能保證的完整顯示。
背景原點background-origin
padding-box預設的， 從內邊距開始
border-box從邊框開始
content-box從內容開始
超過的部分，會被剪掉。
border-box超出邊框部分
content-box超出內容部分
padding-box超出內布局部分
background-origin從**渲染背景圖
border-box從邊框開始渲染背景圖
content-box從內容區域開始渲染背景圖
padding-box從內邊距開始渲染背景圖。
background-origin
: border-box;
box-shadow給盒子新增陰影
text-shadow給文字新增陰影
格式：text-shadow:水平偏移量 垂直偏移量 模糊程度 陰影顏色
指定盒子的寬高計算方式
border-box width/height是指盒子的實際寬高
content-box width/height是指盒子的內容寬高
content-box計算格式：
盒子的實際寬高=內容的寬高（設定的寬高）+內邊距+邊框
border-box計算方式：
盒子的實際寬高（設定的寬高）=內容的寬高+內邊距+邊框
邊框圓角
border-radius格式：background-image: linear-gradient(方向，起始顏色…，終止顏色);
方向：
to left, to right/to top/to bottom45° 從左下到右上
90° 相當於 to right 從左到右
135° 從左上到右下
180° 從上到下
-135 從右上到左下
可以通過百分比設定顏色出現的區域
background-image
:linear-gradient
(45deg,
pink 0%,
red 25%,
blue 50%,
yellow 75%,
green 100%)
;
功能：實現元素不同狀態之間的平滑過渡。
之前：元素->hover狀態 直接切換，從開始狀態到結束狀態，瞬間完成，中間過程幾乎無法檢視。
格式：transition：過渡的屬性 完成時間（s） 運動曲線 延遲時間
數值型的屬性才可以設定過渡。
width,height,color,font-sizeCSS 基本樣式
css 樣式 style 顏色相關樣式 backgroud color 寫法類似於color backgroud image url 位址 backgroud repeat repeat no repeat repeat x repeat ymargin 外間距 border 邊框 padding ...
CSS基本樣式
標籤選擇器 類選擇器 id選擇器 id具有唯一性 優先順序 id 類 id 字型型別 font family 字型大小 font size 字型風格 font style italic 斜體 字型粗細 font weight 定義粗體字元，範圍是100 900 文字顏色 color 水平對齊方式 t...
css樣式設計
1.行內元素 文字 水平居中 通過給父元素設定text align center html body div class txtcenter 我想要在父容器中水平居中顯示。div body css style txtcenter style 2.定寬塊狀元素水平居中 塊狀元素的寬度width為固定值...