「CSS」文字特效（text-shadow）

<h1>Rabbit</h1>

<style>
  body {
    background: #0f93c4;
  }

  h1 {
    color: #fff;
    font: 5em Brush Script MT;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
  }
</style>

rush Script MT 是一種字體

<h1>Rabbit</h1>

<style>
  body {
  	background: #fbfbfb;
  }

  h1 {
    font-size: 5em;
    color: #9e110a;
    text-shadow: 4px 4px 0px #fff,
    10px 10px 0px #cbcbcd;
  }
</style>

<h1>Rabbit</h1>

<style>
  body {
    background: #b1ccc3;
  }

  h1 {
    font: 5em Brush Script MT;
    color: #a5536a;
    text-shadow: -4px -2px 0 #fff;
  }
</style>

Brush Script MT 是一種字體

個(gè)小分享道哥就跟大家分享一下getElementById的用法，這個(gè)方法它是干什么用的呢，這個(gè)啊是最基本的js操作html標(biāo)簽最多也是最常用最基礎(chǔ)的方法啦。我們實(shí)際運(yùn)用中用它來(lái)獲取html中的標(biāo)簽對(duì)象，從而達(dá)到動(dòng)態(tài)的效果。

第一個(gè)我們先來(lái)test一下，用getElementById來(lái)獲取下html文本框中的內(nèi)容。

已知有如下html代碼

<body>
 <input type="text" id="a"/><input type="button" value="獲取文本框中的值" onclick="f1()"/><br/>
	 <input type="button" value="獲取文本框中的值" onclick="f2()"/>
 </body>

現(xiàn)在我們就用js來(lái)獲取下id="a"的文本框中的內(nèi)容

<script type="text/javascript">
function f1()
{
//獲取文本框中的值
var a=document.getElementById("a").value;
alert(a);
}
</script>

當(dāng)我們?cè)邳c(diǎn)擊獲取文本框中的值這個(gè)按鈕的時(shí)候我們就可以獲取到a文本框中的內(nèi)容，實(shí)現(xiàn)結(jié)果如下

那么既然有獲取那同樣的就有設(shè)置，我們除了可以手動(dòng)的自己輸入內(nèi)容到文本框中，相反我們依舊可以通過(guò)我們的getElementById來(lái)給文本框賦值，也就是用代碼將內(nèi)容顯示在文本框中，且看下例

 <body>
 <input type="text" id="a" style="color:red;font-size:22px; height:25px;"/>
	 <br/><input type="button" value="獲取文本框中的值" onclick="f1()"/><br/>
	 <input type="button" value="給文本框賦值" onclick="f2()"/>
 </body>

<script type="text/javascript">
 function f1()
	{
	 //獲取文本框中的值
		var a=document.getElementById("a").value;
		alert(a);
	}
	function f2()
	{
	 //給文本框賦值 點(diǎn)擊給文本框賦值的按鈕動(dòng)態(tài)賦值
	 document.getElementById("a").value="歡迎來(lái)到j(luò)s世界";
	}

結(jié)果如下

本案例完整代碼

表單input：表單是用來(lái)收集信息的，由表單控件(表單元素)、提示信息、表單域構(gòu)成。

input控件的屬性及值：

除以上屬性外，input元素type屬性還有一個(gè)number屬性值，此為僅可以填數(shù)字，默認(rèn)是可以選擇或者填寫(xiě)任意數(shù)字，但是當(dāng)type屬性為number屬性值時(shí)，可以使用max和min屬性來(lái)限制數(shù)字的取值范圍，input更多屬性見(jiàn)HTML5

 <input type="number" min="0"> <!-- min屬性限定最小值為0 -->

label標(biāo)簽：

label標(biāo)簽是為input標(biāo)簽服務(wù)的，用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)


    <label> <!-- 1、直接使用label標(biāo)簽包裹要點(diǎn)擊的元素獲得焦點(diǎn) -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label標(biāo)簽的for屬性找input元素獲得焦點(diǎn) -->
    <input id="name" type="text"/>

表單域form：

form元素用于創(chuàng)建一個(gè)表單，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器;默認(rèn)form標(biāo)簽中需要有一個(gè)submit按鈕，如果form里面沒(méi)有submit按鈕，那么可以使用button中type屬性為submit的button按鈕，這個(gè)buttont按鈕可能不在form表單中，此時(shí)可以給type屬性值為submit的button添加form屬性，值為form表單的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址，method屬性設(shè)置提交方式，其屬性值有post和get,name屬性用來(lái)給表單域定義名字，用于區(qū)分表單域 -->
      姓名：<input type="text">
      年齡：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能顯示一行內(nèi)容，textarea元素可以顯示多行，一般做留言效果使用，常常被稱為富文本域。


     <!-- rows屬性限定行數(shù)，當(dāng)行數(shù)超過(guò)限定后會(huì)出現(xiàn)滾動(dòng)條，cols屬性限定的是列數(shù)，當(dāng)超過(guò)限定后會(huì)換行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在實(shí)際開(kāi)發(fā)中如果需要用到比較復(fù)雜的富文本域（類似word的，可以上傳視頻圖片等功能）推薦使用第三方插件，這里推薦大家一款使用的富文本插件：UEditor,使用它可以在網(wǎng)頁(yè)中實(shí)現(xiàn)類似word等編輯，如果想要了解更多及方法請(qǐng)查閱官方文檔：http://fex.baidu.com/ueditor/，當(dāng)然類似的富文本編輯器還有很多，如：CKeditor：https://ckeditor.com/等

富文本編輯器可以自己做，其原理是利用document的execCommand()方法，這個(gè)方法實(shí)際開(kāi)發(fā)中很少用，已經(jīng)廢棄，所以一般很少有人了解，如果想要了解更多，可閱讀官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜單)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分組1"><!-- optgroup標(biāo)簽用來(lái)分組 -->>
                <option value="">
                    測(cè)試1
                </option>
                <option value="">
                    測(cè)試2
                </option>
                <option value="">
                    測(cè)試3
                </option>
            </optgroup>
            <optgroup value="" label="分組2">
                <option value="">選項(xiàng)1</option> <!-- select默認(rèn)選擇第一個(gè)option，當(dāng)給option加selected屬性時(shí)，則會(huì)選中此項(xiàng)顯示 -->
                <option value="" selected="selected">選項(xiàng)2</option> <!-- selected屬性的selected屬性值可以省略，其效果不變-->
                <option value="">選項(xiàng)3</option>
            </optgroup>
          </select>
    </body>

塊引用標(biāo)簽：

有的時(shí)候會(huì)引用名人名言等，此時(shí)建議使用引用標(biāo)簽，引用標(biāo)簽分為長(zhǎng)引用和短引用兩種，長(zhǎng)引用標(biāo)簽效果是插入換行和外邊距，短引用標(biāo)簽的效果是加上虛擬的引號(hào)。


    <blockquote>海上生明月，天涯共此時(shí)。</blockquote><!-- 長(zhǎng)引用標(biāo)簽 -->
    
    <q>引號(hào)</q><!-- 段引用會(huì)給內(nèi)容加上虛擬的引號(hào)，這個(gè)引號(hào)根本不存在。 -->

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問(wèn)題可通過(guò)以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：web技術(shù)分享｜c(diǎn)ss filter和getUser
下一篇：ionic環(huán)境搭建

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

「CSS」文字特效（text-shadow）

本案例完整代碼

您的項(xiàng)目需求