2. 程式人生 > >CSS中使用文字陰影與元素陰影

CSS中使用文字陰影與元素陰影

阿新 • • 發佈：2020-01-18

文字陰影介紹

  • 在CSS中使用text-shadow屬性設定文字陰影，該屬性一共有4個屬性值如：水平陰影、垂直陰影、（清晰度或模糊距離）、陰影顏色。
  • text-shadow屬性值說明，在文字陰影實踐中：第一個值是設定陰影水平方向移動，第二個值是設定陰影垂直方向移動，第三個值是設定陰影模糊距離，第四個值是設定陰影顏色。
  • text-shadow屬性值可以設定為負數。
  • 文字可以設定多個陰影以逗號分隔即可。
text-shadow: 1px 2px 3px red ,1px 2px 6px rebeccapurple;

文字陰影實踐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文字陰影</title>
  <style>  
    div{
      font-size: 60px;
      color: seagreen;
      text-shadow: 1px 2px 3px red;
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰，加油。</div>
</body>

</html>

元素陰影介紹

  • 在CSS中使用box-shadow屬性設定元素陰影。
  • box-shadow屬性值說明如：第一個值是設定陰影水平方向移動，第二個值是設定垂直方向移動，第三個值是設定陰影清晰度，第四個值是設定陰影大小，第五個值是設定陰影顏色，第六個值是設定陰影的位置預設陰影位置在外邊，inset設定陰影在內部。
  • box-shadow屬性值可以設定為負數。
  • box-shadow屬性值可以設定多個陰影，用逗號分隔即可。

  • 元素陰影實踐

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>元素陰影</title>
  <style>  
    div{
      width: 100px;
      height: 100px;
      border: 2px solid red;
      box-shadow:  3px 6px 8px darkblue  ,4px 8px 6px rebeccapurple inset;
    }
  </style>
</head>

<body>
   <div>微笑是最初的信仰，加油。</div>
</body>

</html>

相關推薦

CSS中使用文字陰影與元素陰影

文字陰影介紹 在CSS中使用text-shadow屬性設定文字陰影，該屬性一共有4個屬性值如：水平陰影、垂直陰影、（清晰度或模糊距離）、陰影顏色。 text-shadow屬性值說明，在文字陰影實踐中：第一個值是設定陰影水平方向移動，第二個值是設定陰影垂直方向移動，第三個值是設定陰影模糊距離，第四個值是設定陰

解決JS與CSS中文字亂碼問題

文字亂碼問題都是 因為字元沒有按照utf-8進行編譯css  @charset "utf-8"js<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

CSS 中的內聯元素、塊級元素、display的各個屬性的特點

ron 但是 splay 之間 height 多個 ext 情況 div CSS的內聯元素和塊級元素 塊級元素<h1>-<h6>、p、dt是不可以內聯塊級元素的 1、block和inline這兩個概念是簡略的說法，完整確切的說應該是 block-le

13 css中文字排版

class 排版 col log 標題 文字 批評 head css <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</t

【Web前端】清除浮動&amp;css中文字體

white hidden lag iso 學習資源 target 元素 關系 align 清理浮動有非常多種方式，像使用 br 標簽自帶的 clear 屬，使用元素的 overflow。使用空標簽來設置 clear:both 等等。但考慮到兼容問題和語義化

css中偽類/偽元素詳解

input 其他 中文 tro 網頁 單元 web link 語言 一、偽類和偽元素 偽類和偽元素都是用來修飾不在文檔樹中的部分，區別在於， 偽類用於當已有元素處於的某個狀態時，為其添加對應的樣式，這個狀態是根據用戶行為而動態變化的(如:hover/:active)。

CSS中的px與物理像素、邏輯像素、1px邊框問題

情況 這樣的 dep 兩種 事情 pos scree 開心 screen 一直不太清楚CSS中的1px與邏輯像素、物理像素是個什麽關系（作為一名前端感覺很慚愧 -_-！），今天終於花時間徹底弄清楚了，其實弄清楚之後就覺得事情很簡單，但也只有在弄清楚之後，才會覺得簡單（語出《

css中文字（text）和字型（font）屬性

文字屬性 1、text-decoration屬性表示文字的修飾 none：取消裝飾 underline ：下劃線，與標籤、效果相同 overline ：上劃線 line-through ：貫穿線（刪除線），與標籤、效果相同 blink ：閃爍（因相容性問題很少使用）

CSS中父div與子div——子div有內容，父div高度卻為0

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

matlab中文字檔案與影象轉化

  一  將圖片轉化為txt文字檔案 a=imread('picture.bmp');   //讀取picture.bmp圖片 b=rgb2gray(a);        &

20181127——Css中的link與import的區別是什麼

1、link語法結構 2、@import語法結構 @import + 空格+ url(CSS檔案路徑地址); 1）、在html中 <style type="text/css"> @import url(CSS檔案路徑地址); </style> 2）、在css

【轉】css中float left與float right的使用說明

http://www.cnblogs.com/zcy_soft/archive/2011/02/12/1952513.html CSS中很多時候會用到浮動來佈局，也就是經常見到的float:left或者float:right，簡單點來說，前者是左浮動(往左側向前邊的非浮

關於css中文字和盒子居中的方法

目錄 文字居中 盒子居中 文字居中 1.使用text-align與line-height <!DOCTYPE html> <html> <head> <meta charset="utf-8">

css中字型單位與超連結樣式

設定字型大小位畫素 可以完全定死 h1 {font-size:40px;} 用em來設定字型的大小 來代替畫素px 1em和當前字型大小相等,在瀏覽器中預設的文字大小是16px 1em = 16px  可以通過如下公式將畫素轉為em px / 16 = em

css中的流，元素，基本尺寸

流 元素 基本尺寸 流之所以影響整個css世界，是因為它影響了css世界的基石 --HTML HTML 常見的標籤有雖然標籤種類繁多，但通常我們就把它們分為兩類： 塊級元素（block-level element）和內聯元素（inline element）。 1.塊級元素 1.1 概念相關 “塊級元素”對

也許你知道css中的display與visibility,但是你可能會忽略display: flex--伸縮容器與display: block的關係和區別

複習display與visibility display: none;–元素的摧毀(元素消失) display: block;–元素的重建(設定為塊級元素,元素出現) visibility: hidden;–元素的隱藏(佔有元素原有位置,實質則是不透明度 opacity為0的改變)

對於CSS中的1px 與1em的區別

2014年02月24日 15:23:02 yanbin_2010 閱讀數：865 個人分類： 前端

css中的定位與層級

相對定位小技巧：div.box$*+tab——<divclass="box1"></div><divclass="box2"></div><divclass="box3"></div>Position開啟

中文字定位與識別的評測方法

評測程式碼github地址 這是我將下面介紹的兩種方法的程式碼合併了，並且該了一些原有的bug，如-p引數不能用等，還加了end to end的識別結果的評測方法。 檢測部分 在ICDAR的一個答疑網頁(F.A.Q)中有相關介紹，其中文字定位分為幾個挑戰，分別稱為Challenges

css中絕對定位的元素如何讓其居中顯示

對於前端工程師來說，頁面佈局是必備技能之一，我們經常有過這樣的需求，就是讓某個元素上下左右居中顯示的業務。常規來說一般水平居中使用margin：0 auto就能夠解決居中問題，但是當我們的元素居於父類是相對定位，自己是絕對定位的如何讓其相對於父類垂直居中對齊呢？