css 陰影 效果_CSS陰影效果

css 陰影 效果

CSS中的陰影效果 (Shadow Effects in CSS)

It is always good to make our web pages stylish and beautiful, web pages that would catch users eyes instantly but one gets confused as to how to style his or her web page. The confusion is quite legit too as there is an abundance of styling techniques that one can apply on their web page. Therefore, this section is about one such styling method, that is shadows in CSS.

使我們的網頁時尚美觀,可以立即吸引用戶的眼球,但對于如何設置其網頁樣式卻感到困惑,這總是好事。 混亂也很合法,因為人們可以在其網頁上應用大量的樣式設計技術。 因此,本節將介紹一種這樣的樣式化方法,即CSS中的陰影

Using CSS shadow property you can create shadows for text and boxes. Now that we are aware of what this property is, let us discuss some of its properties as well.

使用CSS shadow屬性 ,可以為文本和框創建陰影。 現在我們知道此屬性是什么,讓我們也討論其某些屬性。

文本陰影屬性 (The text-shadow Property)

The very first and quite easy property is text-shadow property. As the name suggests, using text-shadow property you can apply shadows to the text. Making your text smoky and stylish. The values of this property are mentioned below

第一個也是非常容易的屬性是text-shadow屬性 。 顧名思義,可以使用text-shadow屬性將陰影應用于文本。 使您的文字煙熏和時尚 。 該屬性的值在下面提到

text-shadow property can take up to four values to further make the implication easy,

text-shadow屬性最多可以包含四個值,以進一步簡化含義,

  • Horizontal shadow

    水平陰影

  • Vertical shadow

    垂直陰影

  • Blur effect

    模糊效果

  • Color

    顏色

Syntax:

句法:

Element {
text-shadow: 3px 2px 2px #000000;
}

普通文字陰影 (Normal Text Shadow)

The Normal Text Shadow effect helps you add shadow to your text in a very basic method with not that much coding and easy implementing. This could be better understand with the help of an example.

普通文本陰影效果可幫助您以一種非常基本的方法在文本中添加陰影,而無需太多的編碼并且易于實現。 借助示例可以更好地理解這一點。

Example:

例:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 3px 4px 4px #0011f3;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Output

輸出量

CSS | Text Shadow Property | Example 1

As you can see, in the above example, the normal text-shadow effect is applied and voila!

如您所見,在上面的示例中,將應用普通的文本陰影效果,瞧!

發光的文字效果陰影 (Glowing Text Effect Shadow)

It would be great if we could make our text glow as well. So, why wait and let us move forward with the Glowing text effect shadow property, this property is specifically for making the text to glow.

如果我們還可以使文本發光,那將是很棒的。 因此,為什么要等待并讓我們繼續使用“發光文本效果”陰影屬性,該屬性專門用于使文本發光。

An example can surely help you understand better.

一個例子肯定可以幫助您更好地理解。

Example:

例:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #f40;
text-shadow: 0 0 4px #00FF9C;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>

Output

輸出量

CSS | Text Shadow Property | Example 2

So, you can see, in the above example, the glowing effect text-shadow is applied.

因此,在上面的示例中,您可以看到應用了發光效果text-shadow 。

Box Shadow屬性 (Box Shadow Property)

Next, what if someone wants to apply this property to elements is the HTML? Well, Box Shadow Property has got you covered. This property is used to apply the shadow to elements in CSS. Even further the Box Shadow Property has its own set of values.

接下來,如果有人想將此屬性應用于元素,那就是HTML? 好吧,Box Shadow Property可以滿足您的需求。 此屬性用于將陰影應用于CSS中的元素。 更進一步,Box Shadow屬性具有自己的一組值。

Values:

值:

The box-shadow property can take one to six values,

box-shadow屬性可以采用一到六個值,

  • inset keyword (it changes the shadow to one inside of the frame)

    inset關鍵字(將陰影更改為幀內的一個)

  • horizontal shadow

    水平陰影

  • vertical shadow

    垂直陰影

  • blur effect

    模糊效果

  • spreading

    傳播

  • color

    顏色

Syntax:

句法:

Element {
box-shadow: 10px 10px;
}

Example:

例:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid;
padding: 30px;
box-shadow: 5px 10px 8px 10px #006969;
}
</style>
</head>
<body>
<div>
<p>Box shadow effect.</p>
</div>
</body>
</html>

Output

輸出量

CSS | Text Shadow Property | Example 3

Therefore the above example shows the implementation of box-shadow property which has been applied to the div element.

因此,上面的示例顯示了已應用于div元素的box-shadow屬性的實現。

翻譯自: https://www.includehelp.com/code-snippets/css-shadow-effects.aspx

css 陰影 效果

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

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

相關文章

java常見的ClassNotFoundException-----菜鳥學習java

java常見的ClassNotFoundException 1 - java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2 - java.lang.ClassNotFoundException: javax.transaction.Synchronization 添加包jta.jar(hiberante)3 - java.lang.ClassNo…

關于easyui的一些小知識點(1)

讓layout布局自動適應瀏覽器寬度只需要加上fit"true"屬性。轉載于:https://www.cnblogs.com/haifg/p/3613789.html

《MySQL——加鎖規則(待補全,有些沒看懂)》

catalog加鎖規則等值查詢間隙鎖非唯一索引等值鎖主鍵索引范圍鎖非唯一索引范圍鎖唯一索引范圍鎖 bug非唯一索引上存在"等值"的例子limit語句加鎖關于死鎖總結 1、查詢過程中訪問到的對象才會加鎖&#xff0c;而加鎖的基本單位是next-key lock&#xff08;前開后閉&am…

c# 命名空間命名規范_C#中的命名空間

c# 命名空間命名規范C&#xff03;命名空間 (C# Namespace ) In C# namespaces are used to group similar type of classes. Two classes with same name in different namespaces never conflict to each other. 在C&#xff03;中&#xff0c;名稱空間用于對相似類型的類進…

PHP環境搭建:Windows 7下安裝配置PHP+Apache+Mysql環境教程

這兩天剛裝好Windows 7&#xff0c;碰巧前段時間有朋友問我Windows下如何安裝搭建PHP環境&#xff0c;所以打算勤勞下&#xff0c;手動一步步搭建PHP環境&#xff0c;暫且不使用PHP環境搭建軟件了&#xff0c;在此詳細圖解在Windows 7下安裝配置PHPApacheMysql環境的教程&#…

《MySQL—— 業務高峰期的性能問題的緊急處理的手段 》

catalog短連接風暴先處理占著連接但是不工作地線程減少連接過程的消耗慢查詢性能問題索引沒有設計好語句沒寫好選錯索引QPS突增問題短連接風暴 正常的短連接&#xff1a; 執行很少sql語句就斷開&#xff0c;下次需要的時候再重連。MySQL建立連接的過程成本很高&#xff0c;包含…

sql 算出下級銷售總和_找出總和字符串

sql 算出下級銷售總和Description: 描述&#xff1a; This is a standard interview problem to check that the given string is a sum string or not using backtracking. 這是一個標準的面試問題&#xff0c;用于檢查給定的字符串是否為總和字符串或不使用回溯。 Problem…

Request 分別獲取具有相同 name 屬性表單元素值

html 中是允許多個具有相同name屬性的元素的&#xff0c;例如 <div> <input name"txtName" id"txtFirstName" type"text" /> <input name"txtName" id"txtMiddleName" type"text" /> <input…

《MySQL——redo log 與 binlog 寫入機制》

目錄binlog寫入機制redo log寫入機制組提交機制實現大量的TPS理解WAL機制如何提升IO性能瓶頸WAL機制告訴我們&#xff1a;只要redo log與binlog保證持久化到磁盤里&#xff0c;就能確保MySQL異常重啟后&#xff0c;數據可以恢復。 下面主要記錄一下MySQL寫入binlog和redo log的…

BBIAB的完整形式是什么?

BBIAB&#xff1a;再回來一點 (BBIAB: Be Back In A Bit) BBIAB is an abbreviation of "Be Back In A Bit". BBIAB是“ Be Back in A Bit”的縮寫 。 It is an expression, which is commonly used in messaging or chatting on social media networking sites lik…

字符串:KMP Eentend-Kmp 自動機 trie圖 trie樹 后綴樹 后綴數組

涉及到字符串的問題&#xff0c;無外乎這樣一些算法和數據結構&#xff1a;自動機 KMP算法 Extend-KMP 后綴樹 后綴數組 trie樹 trie圖及其應用。當然這些都是比較高級的數據結構和算法&#xff0c;而這里面最常用和最熟悉的大概是kmp&#xff0c;即使如此還是有相當一部分人也…

WPF CanExecuteChanged

繼承ICommand ,RelayCommand命令 1 public class RelayCommand : ICommand2 {3 private readonly Action _execute;4 private readonly Func<bool> _canExecute;5 public event EventHandler CanExecuteChanged;6 public RelayComma…

《MySQL——主備一致性六問六答》

目錄備庫為什么要設置為只讀模式&#xff1f;備庫設置為只讀&#xff0c;如何與主庫保持同步更新&#xff1f;A到B的內部流程如何&#xff1f;binlog內容是什么&#xff1f;row格式對于恢復數據有何好處M-M結構的循環復制問題以及解決方案備庫為什么要設置為只讀模式&#xff1…

代碼管理工具

http://blogs.msdn.com/b/visualstudio/archive/2012/06/11/world-of-samples-at-your-fingertips.aspx轉載于:https://www.cnblogs.com/hebeiDGL/archive/2012/09/25/2700961.html

fyi 在郵件里是什么意思_FYI的完整形式是什么?

fyi 在郵件里是什么意思僅供參考&#xff1a;供您參考 (FYI: For Your Information) FYI is an acronym of "For Your Information". It is a widespread internet slang used these days in text messaging, instant messaging, and chatting on Facebook, WhatsApp…

Hyper-V 替換 vmwp

要激活 Hyper-V 下的虛機 最簡單的方法是用帶證書的vmwp替換掉原來的 帶證書的vmwp參見&#xff1a;http://bbs.pcbeta.com/viewthread-1408240-1-1.html 下載后腰替換 先把 Hyper-V 的倆服務停止掉 然后找到 C:\Windows\System32\vmwp.exe 右鍵--安全 替換掉所有者 然后給自己…

《MySQL——主備切換流程與主備延遲》

目錄主備切換主備延遲的原因可靠性優先策略的主備切換流程可用性優先策略的主備切換流程主備切換 主備切換分為主動運維與被動操作。 軟件升級、主庫所在機器按計劃下線為主動運維。 主庫所在機器掉電為被動操作。 同步延遲 1、主庫A執行完一個事務&#xff0c;寫入binlog…

ejb模式_EJB的完整形式是什么?

ejb模式EJB&#xff1a;企業Java Bean (EJB: Enterprise Java Bean) EJB is an abbreviation of Enterprise Java Bean. EJB is one of many Java application programming interfaces (API) for flexible and manageable structuring of Java Platform, Enterprise Edition (J…

Android之PreferenceActivity

http://www.cnblogs.com/wservices/archive/2010/07/08/1773449.html 看到很多書中都沒有對PreferenceActivity做介紹&#xff0c;而我正好又在項目中用到&#xff0c;所以就把自己的使用的在這總結一下&#xff0c;也方便日后查找。 PerferenceActivity是什么&#xff0c;看下…

淺談算法和數據結構: 七 二叉查找樹

前文介紹了符號表的兩種實現&#xff0c;無序鏈表和有序數組&#xff0c;無序鏈表在插入的時候具有較高的靈活性&#xff0c;而有序數組在查找時具有較高的效率&#xff0c;本文介紹的二叉查找樹(Binary Search Tree&#xff0c;BST)這一數據結構綜合了以上兩種數據結構的優點。…