前端基礎知識學習 CSS3學習(六)盒模型樣式

2021-08-21 11:33:26 字數 884 閱讀 4797

文字描邊

h1

文字排版

例項,省略過長內容顯示為…

div

注意:這個的使用的前提是:不能讓元素的大小靠內容撐大,也就是不能使用display: inline;屬性

盒模型陰影
box-shadow: inset 10px 10px 10px 0px

black ;

說明:box-shadow較text-shadow多了兩個引數,第乙個是陰影方向,第五個是陰影大小

#warp

#warp

:hover

倒影-webkit-box-reflect
img

resize:允許你控制乙個元素的可調整性,需要overflow:auto配合使用

#warp

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個區域的特定元素,

#warp > div

在上面的css**中使用float: left;如果要使用border: 1px solid;就必須新增box-sizing: border-box;才不會改變布局

CSS3基礎知識彙總

css3樣式表優勢 1 豐富的修飾樣式 2 內容與修飾分離,利於專案開發 3 實現樣式復用,提高開發學歷 4 實現頁面的精準控制 css3語法 type text css listyle 3.樣式表分類 1 外部樣式表 head 其中rel stylesheet 表示在網頁中使用該外部樣式表,typ...

css3基礎知識 回顧

1.屬性選擇器 完全匹配的屬性選擇器 id article 示例 結果 前兩文字框的邊框為兩畫素紅色。包含匹配元素選擇器,包含制定的字串。語法 attribute vlue attribute指的屬性名,value 指的是屬性值。示例 css3鞏固學習 css3鞏固學習 css3鞏固學習 結果 第乙...

css3的基礎知識

transfrom的應用 1.旋 transform rotate 30deg 2.陰影效果 box shadow 10px 10px 5px 888888 3.滑鼠移入放大 transform scale 2,2 放慢變化的時間效果 transition transform 想要實現的屬性 6s,...