CSS3中border-radius、box-shadow與gradient那點事兒

一、border-radius

border-radius用于添加圓角邊框，用處非常廣泛。

1）一個值，代表了四個角

.radius-one {/* Safari 3-4, iOS 1-3.2, Android 1.6- */-webkit-border-radius: 12px; /* Firefox 1-3.6 */-moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */border-radius: 12px; 
}

2）三個值，中間的值代表右上和左下

.radius-three {/* top left, top right|bottom left, bottom right */border-radius: 5px 20px 5px;
}

?

3）斜杠設置第二組值

“/”前是指圓角的水平半徑，而“/”后是指圓角的垂直半徑，他們兩都遵循TRBL（上右下左）的順序原則。左上角是10px/40px，右上角是20px/30px，以此類推。

.radius-five {border-radius: 10px 20px 30px 40px/40px 30px 20px 10px; /* horizontal radius / vertical radius */
}

4）背景圖將被裁剪

.radius-img {background: url(img.jpg) no-repeat right bottom;border-radius: 12px;
}

?

二、box-shadow

box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

box-shadow: h-shadow v-shadow blur spread color inset;

偏移方向如下圖所示：

1）單層陰影

.box-shadow {/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */-webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */-moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */box-shadow:         3px 3px 5px 6px #ccc;  
}

2）多重陰影

黑色：帶模糊和陰影尺寸

紫色與黃色：只有水平和垂直

紅色與藍色：水平、垂直以及模糊

.box-shadow-more {box-shadow: 0 0 10px 5px black, 40px -30px purple, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}

三、CSS3 Gradient

1）linear-gradient（線性漸變）

在創建漸變的過程中，可以指定多個中間顏色值，這個值稱為色標。每個色標包含一種顏色和一個位置，瀏覽器從每個色標的顏色淡出到下一個，以創建平滑的漸變。

PhotoShop中的漸變編輯器如下所示：

?

CSS兼容性如下：

?

各個瀏覽器語法如下：

-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新發布書寫語法
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式語法書寫規則-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

?下面是一個實例，與上面的語法一一對應，順序也是一樣的：

.linear-gradient {background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(50%,rgba(255,156,35,1)));background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
　　filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffcb48, endColorstr=#ff9c23)";

　　background: linear-gradient(to bottom,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
}

標準語法對于方向需要使用一個to，而且寫的方向要與其它的相反，如果是top，這里就是bottom

第二個顏色我用了個50%，開始漸變的起始位置

?

還可以設置角度，它是一個由水平線與漸變線產生的的角度，逆時針方向。因此，使用0deg將產生一個左到右橫向梯度，而90度將創建一個從底部到頂部的垂直漸變。

-filter、-ms-filter和-webkit-gradient就不能用啦。

.linear-gradient-angle {background: -moz-linear-gradient(45deg,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 50%);background: -webkit-linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);background: -o-linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);background: linear-gradient(45deg,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 50%);
}

?

2）radial-gradient（徑向漸變）

CSS兼容性與上面的線性漸變類似。

各個瀏覽器語法如下：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
-o-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);
radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

下面是一個實例，與上面的語法一一對應：

.radial-gradient {background: -moz-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: -webkit-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: -o-radial-gradient(10px 20px, #f00, #ff0 40%, #080);background: radial-gradient(at 10px 20px, #f00, #ff0 40%, #080);
}

標準語法對于坐標需要使用一個at；

第二個顏色我用了個40%，開始漸變的起始位置

?

demo下載：

http://download.csdn.net/detail/loneleaf1/9146297

?

參考資料：

https://css-tricks.com/almanac/properties/b/border-radius/?? css-tricks border-radius

http://www.cnblogs.com/mofish/p/3832136.html ??從css3書寫順序引出來的border-radius參數

https://css-tricks.com/almanac/properties/b/box-shadow/ ? ?css-tricks border-shadow

http://www.basecss.net/article/box-shadow.html?? [譯]Box-shadow, CSS3最好的特性之一

http://www.webhek.com/css-box-shadow-property ? ?CSS陰影效果(Box-shadow)用法趣味講解

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html?? CSS3 線性漸變（linear-gradient）

http://www.cnblogs.com/lhb25/archive/2013/02/24/css3-radial-gradient.html ??CSS3 徑向漸變（radial-gradient）

http://www.w3cplus.com/css3/new-css3-linear-gradient.html?? 再說CSS3漸變——線性漸變

http://blog.csdn.net/playboyanta123/article/details/9303857 ?? radial-gradient CSS3的蛋疼的徑向漸變

轉載于:https://www.cnblogs.com/strick/p/4843595.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/258263.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/258263.shtml
英文地址，請注明出處：http://en.pswp.cn/news/258263.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

編程 跳臺階_Java版劍指offer編程題第8題--跳臺階

編程 跳臺階_Java版劍指offer編程題第8題--跳臺階

跟learnjiawa一起每天一道算法編程題&#xff0c;既可以增強對常用API的熟悉能力&#xff0c;也能增強自己的編程能力和解決問題的能力。算法和數據結構&#xff0c;是基礎中的基礎&#xff0c;更是筆試的重中之重。不積硅步&#xff0c;無以至千里&#xff1b;不積小流&#x…
閱讀更多...
獲取漢字的首字母（轉）

獲取漢字的首字母（轉）

轉換 獲取一個漢字的拼音首字母。 GB碼兩個字節分別減去160&#xff0c;轉換成10進制碼組合就可以得到區位碼例如漢字“你”的GB碼是0xC4/0xE3&#xff0c;分別減去0xA0&#xf…
閱讀更多...
$ionicPopup

$ionicPopup

轉自&#xff1a;http://www.ionicframework.com/docs/api/service/%24ionicPopup/ Usage A few basic examples, see below for details about all of the options available. angular.module(mySuperApp, [ionic]) .controller(PopupCtrl,function($scope, $ionicPopup, $tim…
閱讀更多...
目標規劃運籌學例題doc_運籌學之目標規劃(胡運權版).doc

目標規劃運籌學例題doc_運籌學之目標規劃(胡運權版).doc

運籌學之目標規劃(胡運權版).doc第七章 目標規劃1 目標規劃的提出線性規劃問題是討論一個給定的線性目標函數在一組線性約束條件下的最大值或最小值問題。對于一個實際問題&#xff0c;管理科學者根據管理層決策目標的要求&#xff0c;首先確定一個目標函數以衡量不同決策的優劣…
閱讀更多...
Deep Learning（深度學習) 學習筆記（四）

Deep Learning（深度學習) 學習筆記（四）

神經概率語言模型&#xff0c;內容分為三塊&#xff1a;問題&#xff0c;模型與準則&#xff0c;實驗結果。[此節內容未完待續...] 1&#xff0c;語言模型問題 語言模型問題就是給定一個語言詞典包括v個單詞&#xff0c;對一個字串做出二元推斷&#xff0c;推斷其是否符合該語言…
閱讀更多...
Java Virtual Machine

Java Virtual Machine

后續完善轉載于:https://www.cnblogs.com/fight-tao/p/4849167.html
閱讀更多...
selenium 鼠標懸浮_處理Selenium3+python3定位鼠標懸停才顯示的元素

selenium 鼠標懸浮_處理Selenium3+python3定位鼠標懸停才顯示的元素

先給大家介紹下Selenium3python3--如何定位鼠標懸停才顯示的元素定位鼠標懸停才顯示的元素&#xff0c;要引入新模塊# coding:utf-8from selenium import webdriverfrom selenium.webdriver.common.action_chains import ActionChainsdriver webdriver.Firefox()driver.get(&q…
閱讀更多...
JavaScript 運行機制

JavaScript 運行機制

JavaScript 運行機制 閱讀目錄 一、為什么JavaScript是單線程&#xff1f;二、任務隊列三、事件和回調函數四、Event Loop五、定時器六、Node.js的Event Loop七、關于setTimeout的測試一、為什么JavaScript是單線程&#xff1f; JavaScript語言是單線程&#xff0c;也就是說&am…
閱讀更多...
mysql 時間 本周 本月_mysql查詢當天、本周、上周、本月、上月信息

mysql 時間 本周 本月_mysql查詢當天、本周、上周、本月、上月信息

今天select * from 表名 where to_days(時間字段名) to_days(now());昨天SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ) – TO_DAYS( 時間字段名) < 17天SELECT * FROM 表名 where DATE_SUB(CURDATE(), INTERVAL 7 DAY) < date(時間字段名)近30天SELECT * FROM 表名 wher…
閱讀更多...
android自定義倒計時控件示例

android自定義倒計時控件示例

這篇文章主要介紹了Android秒殺倒計時自定義TextView示例&#xff0c;大家參考使用吧 自定義TextView控件TimeTextView代碼&#xff1a; 復制代碼 代碼如下:import android.content.Context;import android.content.res.TypedArray;import android.graphics.Paint;import andro…
閱讀更多...
Spring Cloud構建微服務架構：服務消費（Ribbon）【Dalston版】

Spring Cloud構建微服務架構：服務消費（Ribbon）【Dalston版】

通過上一篇《Spring Cloud構建微服務架構&#xff1a;服務消費&#xff08;基礎&#xff09;》&#xff0c;我們已經學會如何通過LoadBalancerClient接口來獲取某個服務的具體實例&#xff0c;并根據實例信息來發起服務接口消費請求。但是這樣的做法需要我們手工的去編寫服務選…
閱讀更多...
檢測是否點擊到精靈

檢測是否點擊到精靈

需要給每個精靈設置tag.可以用枚舉 bool GE::GamePass::ccTouchBegan( cocos2d::CCTouch *pTouch, cocos2d::CCEvent *pEvent ) { const int iButtonCount 2; const int iButtonTags[iButtonCount] { GamePass_btn_share, GamePass_btn_return }; for(int i 0; i < iButt…
閱讀更多...
從gitlab上拉代碼_從gitlab上拉取代碼并一鍵部署

從gitlab上拉代碼_從gitlab上拉取代碼并一鍵部署

一、gitlab安裝GitLab是一個利用Ruby on Rails開發的開源應用程序&#xff0c;實現一個自托管的Git項目倉庫&#xff0c;可通過Web界面進行訪問公開的或者私人項目。GitLab擁有與Github類似的功能&#xff0c;能夠瀏覽源代碼&#xff0c;管理缺陷和注釋。可以管理團隊對倉庫的訪…
閱讀更多...
LPWA技術：發展物聯網的最佳選擇

LPWA技術：發展物聯網的最佳選擇

物聯網時代的物物相連將會使百億以上物體連入網絡&#xff0c;這對傳統上的兩種通信技術&#xff0c;即近距離無線接入和移動蜂窩網提出了更高的要求。事實上&#xff0c;目前&#xff0c;用于物聯網發展的通信技術正在全球范圍內開發&#xff0c;低功耗廣域網通信技術(Low Pow…
閱讀更多...
上傳文件大小限制，webconfig和IIS配置大文件上傳

上傳文件大小限制，webconfig和IIS配置大文件上傳

IIS6下上傳大文件沒有問題&#xff0c;但是遷移到IIS7下面&#xff0c;上傳大文件時&#xff0c;出現HTTP 404錯誤。 IIS配置上傳大小&#xff0c;webconfig <!-- 配置允許上傳大小 --><httpRuntime maxRequestLength"1997151" useFullyQualifiedRedirectU…
閱讀更多...
產品管理流程

產品管理流程

轉載于:https://www.cnblogs.com/candle806/p/4860841.html
閱讀更多...
如何根據灰度直方圖計算標準差_如何根據電器功率計算電線的粗細？

如何根據灰度直方圖計算標準差_如何根據電器功率計算電線的粗細？

一般來說&#xff0c;測算電線的粗細&#xff0c;需要根據功率計算電流&#xff0c;根據電流選擇導線截面&#xff0c;根據導線的截面&#xff0c;導線或電纜的型號查廠家的該型號的導線電纜的直徑。這里就涉及了&#xff1a;電線粗細與功率之間的關系計算&#xff1b;導線截面…
閱讀更多...
解惑煙草行業工控系統如何風險評估

解惑煙草行業工控系統如何風險評估

上周五下午&#xff0c;威努特工控安全聯合創始人 趙宇 先生&#xff0c;帶來了一場關于“工控系統的風險評估”的技術講座。此次近200注冊報名的朋友&#xff0c;來自各大高校、國企、外企、測評中心、安全廠商、大型集成商以及大型IT科技企業、安全實驗室等。 煙草企業調研參…
閱讀更多...
ORACLE union order by

ORACLE union order by

select * from ( select a.id,a.oacode,a.custid,a.custname,a.xsz,a.salename,a.communicationtheme,a.communicationproperty,a.communicationtime,a.productmanager,a.creator,a.createdate from technology_flow a where a.oastate正常結束 union select b.id,b.oacode,b…
閱讀更多...
UVa 11806 Cheerleaders

UVa 11806 Cheerleaders

題意&#xff1a;m行n列的矩形網格放k個相同的石子&#xff0c;要求第一行最后一行第一列最后一列都必須有石子&#xff0c;問有多少種放法 A為第一行沒有石子的方案數&#xff0c;BCD依此類推&#xff0c;全集為S 如果沒有任何要求的話&#xff0c;放法數應該是C(rc, k) 解法中…
閱讀更多...
最新文章

Copyright @ 2022~2023