摘要:不在指定漸變區域的,以距離其最近的顏色填充。設置漸變為從右到左。這是默認值,等同于留空不寫。最后奉上一碗純拉面。
Talk is cheap.Show me the code.
1.box-shadow.chopsticks{ position: absolute; left: 400px; top: 80px; width: 10px; height: 250px; background-color: #bb8855; border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1); z-index: 99; } .chopsticks:before{ content: ""; position: absolute; left: 20px; top: 0px; width: 10px; height: 250px; background-color: #bb8855; border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2),inset 0 -5px 2px 0 rgba(0,0,0,0.1); z-index: 99; }
【注】:box-shadow是由逗號分隔的陰影列表,每個逗號隔開的便是一個陰影,每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定,可給每個class添加一個或多個陰影。陰影的顏色是任意的,所以陰影有很多妙用。
2.border-radius.egg{ position: absolute; top: 20px; left: 35px; width: 80px; height: 100px; z-index: 7; border-radius: 50% / 60% 60% 40% 40%; -webkit-border-radius:50% / 60% 60% 40% 40%; background-color: #fff; transform:rotate(20deg); } .egg:before{ content: ""; position: absolute; top: 30%; left: 24%; width: 50%; height: 50%; z-index: 7; border-radius: 50%; -webkit-border-radius:50%; background: #FC0; box-shadow: 0 0 2px 2px #f90,inset 0 0 5px 1px rgba(255, 153, 0, 0.5); }
【注】:border-radius
一個值,border-radius:50px;表示水平半徑和垂直半徑相等;
兩個值:border-radius:100px / 50px;"/"前的值表示水平半徑,"/"后的值表示垂直半徑,兩個值 的順序與一個值的順序相同:左上,右上,右下,左下。
css3還提供了對每個角進行設置:
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
3.radial-gradient(徑向漸變)(demo可參考下面的圖,碗和面條都是用徑向漸變實現的)
background-image:radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, #ffcc33 21%, #ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%) background-image:-webkit-radial-gradient(center center,ellipse, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.1) 21%, #ffcc33 21%, #ffcc33 23%, rgba(0, 0, 0, 0.1) 23%, rgba(0, 0, 0, 0) 24%)
【要點】:
radial-gradient(漸變形狀 at 漸變圓心,漸變顏色 [顏色漸變開始位置(距離漸變圓心的大小)],漸變顏色[顏色漸變位置])
-webkit-radial-gradient(漸變圓心,漸變形狀,漸變顏色 [顏色漸變開始位置(距離漸變圓心的大小)],漸變顏色 [顏色漸變位置])
顏色漸變位置不寫時,默認第一個顏色位置是0,第二個是100%。
不在指定漸變區域的,以距離其最近的顏色填充。
4.linear-gradient(線性漸變)(demo可參考下面的圖,海苔是用線性漸變實現的)
background-image: linear-gradient(-20deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%); background-image: -webkit-linear-gradient(110deg, rgba(0, 0, 0, 0.9) 50%, rgba(0, 34, 0, 0.95) 95%);
【要點】:可用方向或角度值指定漸變的方向(或角度)。
to left:設置漸變為從右到左。相當于: 270deg
to right:設置漸變從左到右。相當于: 90deg
to top:設置漸變從下到上。相當于: 0deg
to bottom:設置漸變從上到下。相當于: 180deg。這是默認值,等同于留空不寫。
最后奉上一碗純css拉面。
【注】: 拉面原創出處:https://codepen.io/aaronchuo/pen/GLEed
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116382.html
摘要:的新特性大致分為以下六類選擇器邊框與圓角背景與漸變過渡變換動畫下面分別說一說以上六類都有哪些內容選擇器基本選擇器基本選擇器又分為子選擇器相鄰兄弟選擇器通用兄弟選擇器群組選擇器屬性選擇器為帶有屬性的元素設置樣式為屬性的元素設置樣式選擇屬性值包 CSS3的新特性大致分為以下六類 1.CSS3選擇器 2.CSS3邊框與圓角 3.CSS3背景與漸變 4.CSS3過渡 5.CSS3變換 ...
閱讀 3690·2021-11-22 15:24
閱讀 1592·2021-09-26 09:46
閱讀 1904·2021-09-14 18:01
閱讀 2601·2019-08-30 15:45
閱讀 3526·2019-08-30 14:23
閱讀 1866·2019-08-30 12:43
閱讀 2914·2019-08-30 10:56
閱讀 800·2019-08-29 12:20