生活随笔
收集整理的這篇文章主要介紹了
css新奇技术及其未来发展
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.圖像替換技術：
圖像替換技術是指使用圖像替換頁面中文本的功能，類似與在頁面中插入圖像，只是這種方法更為方便，易于代碼管理。通常來說，設計者習慣使用有意義的圖像去替換一些標題，logo和某些特定的頁面背景。
看個代碼例子：
<html><head><style type="text/css">body{font:90%/1.5 幼圓;color:white;background:black url(圖片/dog.jpg) bottom right fixed repeat-x;//設置背景圖像}div{width:500px;margin:auto;}h1{width:500px;height:155px;background-image:url(圖片/logo.png);//文本標題的背景text-inent:-9999em;//將標題位置設定在窗口之外margin:0;}img{width:500px;height:150px;border:1px solod white;}p{padding:1em;width:500px;}</style></head><body><div><h1>Sweet Rain
</h1><p>黑衣服、黑鱗帶……</p><p>肯定就是反抗拉薩就方式發牢騷李開復阿隆索付款了理解的身份了撒樓上……
</p><img src="圖片/dog.png" alt="Sweet Rain"/></div></body>
</html> 這個例子使用了三張圖片
頁面背景圖像使用了dog.jpg。在body樣式表中，也就是在全局控制的情況下，折這背景圖像，fixed表示將背景圖像固定在頁面中，不隨著頁面內容滾動。repeat-x表示在橫向上重復，所以如果將頁面寬度拉長，會出現背景圖像重復的現象。（fixed的完整寫法是background-attachment:fixed;）
dog.png以圖片超鏈接的形式插了進去
本例中關鍵的部分在于如何使用圖片替換文本。<h1>標簽中本應該是文本Sweet Rain，但樣式表中又插入了一張圖，最終顯示的也就是一張圖。這是因為代碼text-indent:-9999em;表示文本框內的文本縮進-9999em,如此大的數值的作用便是將文本推出窗口之外，所以最終的效果中瀏覽者并不能看到文本。
?
2.css3.0的新發展：
新的標準中大幅度擴展了background和border屬性的功能。主要體現在對于背景圖像和邊框的精細修改，
如修改邊框的border-radius,它能使直角邊框改成圓角。
定義框模型下的文本陰影效果的box-shadow屬性
?
3.實現圓角框模型：
<html><head><title>瀏覽器下的圓角邊框
</title><style type:"text/css">div{background-color:maroon;border-radius:55px 15px;border:4px solid black;color:white;padding:30px;}</style><body><div>在盡快時間分厘卡時間附件ask附件了撒看見反抗拉薩就離開 卡洛斯反抗拉薩九分褲
在盡快時間分厘卡時間附件ask附件了撒看見反抗拉薩就離開 卡洛斯反抗拉薩九分褲
在盡快時間分厘卡時間附件ask附件了撒看見反抗拉薩就離開 卡洛斯在盡快時間分厘卡時間附件ask附件了撒看見反抗拉薩就離開 卡洛斯反抗拉薩九分褲</div></body></head>
</html> ?
轉載于:https://www.cnblogs.com/wangshen31/p/7912284.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的css新奇技术及其未来发展的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
